/* Sayfanın yüksekliğini %100 yapıyoruz */
html, body {
    height: 100%;
    margin: 0;
}

/* Body içinde flexbox düzeni kullanıyoruz */
body {
    display: flex;
    flex-direction: column; /* İçeriği dikeyde yerleştirir */
}

/* İçerik alanını esnek yapıyoruz, footer'ın altta kalabilmesi için */
.content {
    flex: 1; /* İçerik kısmının esnek olmasını sağlar, footer yukarı kaymaz */
    min-height: 100%; /* Sayfanın geri kalanını kapsar */
    height: 2000px; /* İçeriğin uzunluğu sayfa kaydırmayı sağlamak için */
}

    /* İçeriği yatayda tamamen kaplayan görsel */
    .content img {
        width: 100%; /* Görselin genişliğini ekranın tamamı kadar yapar */
        height: 100vh; /* Görselin yüksekliğini ekranın tamamına yapar */
        object-fit: contain; /* Görselin tamamı görünür, oranlar korunur */
        object-position: center; /* Görseli ortalar */
    }


/* Başlangıçta navbar şeffaf */





/* Footer'ı sayfanın alt kısmına yerleştiriyoruz */
.footer {
    width: 100%; /* Footer'ın genişliği ekranın tamamını kapsar */
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 0 0;
    margin-top: auto; /* Footer'ı sayfanın en altına itmek için */
}


.custom-link {
    color: black; /* Varsayılan yazı rengi */
    text-decoration: none; /* Alt çizgi başlangıçta yok */
    background-image: linear-gradient(to right, #00bfff, #00bfff); /* Açık mavi çizgi */
    background-size: 0% 2px; /* Alt çizgi başlangıçta görünmez */
    background-repeat: no-repeat;
    background-position: bottom; /* Alt çizgi yazının altına yerleşsin */
    transition: color 0.3s ease, background-size 0.2s ease; /* Yazı rengi ve alt çizgi geçiş süresi */
}

    .custom-link:hover {
        color: #00bfff !important; /* Yazı rengini parlak mavi yap */
        background-size: 100% 2px; /* Alt çizgi genişlesin */
    }




.custom-link2 {
    display: inline-block; /* Yalnızca yazıyı etkilesin */
    color: black; /* Varsayılan yazı rengi */
    text-decoration: none; /* Alt çizgi başlangıçta yok */
    background-image: linear-gradient(to right, #ef091c, #ef091c); /* Kırmızı alt çizgi */
    background-size: 0% 2px; /* Alt çizgi başlangıçta görünmez */
    background-repeat: no-repeat;
    background-position: bottom; /* Alt çizgi yazının altına yerleşsin */
    transition: color 0.3s ease, background-size 0.2s ease; /* Yazı rengi ve alt çizgi geçiş süresi */
}

    .custom-link2:hover {
        color: #ef091c; /* Yazı rengini kırmızı yap */
        background-size: 100% 2px; /* Alt çizgi genişlesin */
    }

.custom-link3 {
    display: inline-block; /* Yalnızca yazıyı etkilesin */
    color: white; /* Varsayılan yazı rengi */
    text-decoration: none; /* Alt çizgi başlangıçta yok */
    background-image: linear-gradient(to right, #ef091c, #ef091c); /* Kırmızı alt çizgi */
    background-size: 0% 2px; /* Alt çizgi başlangıçta görünmez */
    background-repeat: no-repeat;
    background-position: bottom; /* Alt çizgi yazının altına yerleşsin */
    transition: color 0.3s ease, background-size 0.2s ease; /* Yazı rengi ve alt çizgi geçiş süresi */
}

    .custom-link3:hover {
        color: #ef091c; /* Yazı rengini kırmızı yap */
        background-size: 100% 2px; /* Alt çizgi genişlesin */
    }

.custom-link4 {
    color: #ffffff; /* Neon kırmızı yazı rengi */
    text-decoration: none; /* Alt çizgi yok */
    font-weight: bold; /* Kalın yazı */
    text-shadow: 0 0 0px #ff0000, /* Hafif bir parlama */
    0 0 0px #ff0000, 0 0 0px #ff0000, 0 0 0px #ff0000, /* Turuncuya yakın bir dış parlama */
    0 0 0px #ff0000, 0 0 0px #ff4500;
}



.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Varsayılan Bootstrap'den gelen boşluğu kaldırmak için */
}



.custom-btn:hover {
    background-color: #4e779f !important; /* Hover arka plan rengi */
    transform: rotate(5deg) scale(1); /* Eğilme ve hafif büyüme efekti */
    transition: background-color 0.5s ease, transform 0.5s ease; /* Geçiş süresi ve tipi */
}

.custom-btn2:hover {
    background-color: #4a5056 !important; /* Hover arka plan rengi */
}

.custom-btn3:hover {
    background-color: #4e779f !important; /* Hover arka plan rengi */
}

.custom-btn4:hover {
    background-color: #00bfff !important;
}

.custom-btn5:hover {
    background-color: #4e779f !important; /* Hover arka plan rengi */
}


/* Sayfanın yüksekliğini %100 yapıyoruz */
html, body {
    height: 100%;
    margin: 0;
}

/* Body içinde flexbox düzeni kullanıyoruz */
body {
    display: flex;
    flex-direction: column; /* İçeriği dikeyde yerleştirir */
}

/* İçerik alanını esnek yapıyoruz, footer'ın altta kalabilmesi için */
.content {
    flex: 1; /* İçerik kısmının esnek olmasını sağlar, footer yukarı kaymaz */
    min-height: 100%; /* Sayfanın geri kalanını kapsar */
    height: 2000px; /* İçeriğin uzunluğu sayfa kaydırmayı sağlamak için */
}

    /* İçeriği yatayda tamamen kaplayan görsel */
    .content img {
        width: 100%; /* Görselin genişliğini ekranın tamamı kadar yapar */
        height: 100vh; /* Görselin yüksekliğini ekranın tamamına yapar */
        object-fit: contain; /* Görselin tamamı görünür, oranlar korunur */
        object-position: center; /* Görseli ortalar */
    }


/* Başlangıçta navbar şeffaf */





/* Footer'ı sayfanın alt kısmına yerleştiriyoruz */
.footer {
    width: 100%; /* Footer'ın genişliği ekranın tamamını kapsar */
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 0 0;
    margin-top: auto; /* Footer'ı sayfanın en altına itmek için */
}


.custom-link {
    color: black; /* Varsayılan yazı rengi */
    text-decoration: none; /* Alt çizgi başlangıçta yok */
    background-image: linear-gradient(to right, #00bfff, #00bfff); /* Açık mavi çizgi */
    background-size: 0% 2px; /* Alt çizgi başlangıçta görünmez */
    background-repeat: no-repeat;
    background-position: bottom; /* Alt çizgi yazının altına yerleşsin */
    transition: color 0.3s ease, background-size 0.2s ease; /* Yazı rengi ve alt çizgi geçiş süresi */
}

    .custom-link:hover {
        color: #00bfff !important; /* Yazı rengini parlak mavi yap */
        background-size: 100% 2px; /* Alt çizgi genişlesin */
    }




.custom-link2 {
    display: inline-block; /* Yalnızca yazıyı etkilesin */
    color: black; /* Varsayılan yazı rengi */
    text-decoration: none; /* Alt çizgi başlangıçta yok */
    background-image: linear-gradient(to right, #ef091c, #ef091c); /* Kırmızı alt çizgi */
    background-size: 0% 2px; /* Alt çizgi başlangıçta görünmez */
    background-repeat: no-repeat;
    background-position: bottom; /* Alt çizgi yazının altına yerleşsin */
    transition: color 0.3s ease, background-size 0.2s ease; /* Yazı rengi ve alt çizgi geçiş süresi */
}

    .custom-link2:hover {
        color: #ef091c; /* Yazı rengini kırmızı yap */
        background-size: 100% 2px; /* Alt çizgi genişlesin */
    }

.custom-link3 {
    display: inline-block; /* Yalnızca yazıyı etkilesin */
    color: white; /* Varsayılan yazı rengi */
    text-decoration: none; /* Alt çizgi başlangıçta yok */
    background-image: linear-gradient(to right, #ef091c, #ef091c); /* Kırmızı alt çizgi */
    background-size: 0% 2px; /* Alt çizgi başlangıçta görünmez */
    background-repeat: no-repeat;
    background-position: bottom; /* Alt çizgi yazının altına yerleşsin */
    transition: color 0.3s ease, background-size 0.2s ease; /* Yazı rengi ve alt çizgi geçiş süresi */
}

    .custom-link3:hover {
        color: #ef091c; /* Yazı rengini kırmızı yap */
        background-size: 100% 2px; /* Alt çizgi genişlesin */
    }

.custom-link4 {
    color: #ffffff; /* Neon kırmızı yazı rengi */
    text-decoration: none; /* Alt çizgi yok */
    font-weight: bold; /* Kalın yazı */
    text-shadow: 0 0 0px #ff0000, /* Hafif bir parlama */
    0 0 0px #ff0000, 0 0 0px #ff0000, 0 0 0px #ff0000, /* Turuncuya yakın bir dış parlama */
    0 0 0px #ff0000, 0 0 0px #ff4500;
}



.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Varsayılan Bootstrap'den gelen boşluğu kaldırmak için */
}



.custom-btn:hover {
    background-color: #4e779f !important; /* Hover arka plan rengi */
    transform: rotate(5deg) scale(1); /* Eğilme ve hafif büyüme efekti */
    transition: background-color 0.5s ease, transform 0.5s ease; /* Geçiş süresi ve tipi */
}

.custom-btn2:hover {
    background-color: #4a5056 !important; /* Hover arka plan rengi */
}

.custom-btn3:hover {
    background-color: #4e779f !important; /* Hover arka plan rengi */
}

.custom-btn5:hover {
    background-color: #4e779f !important; /* Hover arka plan rengi */
}

.custom-btn3 {
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%, 0 0);
}


.custom-btn6 {
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%, 13% 0);
}



.custom-btn4:hover {
    background-color: #00bfff !important;
}




.col img {
    display: block; /* Resmi blok öğesi yaparak tam hizalama sağlar */
    margin: 30 auto; /* Ortalar */
    margin-top: 10px; /* Yazının hemen altına boşluk bırakır */
}

input::placeholder {
    text-align: center; /* Placeholder yazısını merkeze hizala */
    color: gray; /* Placeholder rengini ayarla (isteğe bağlı) */
}


#lecturerSubmenu .nav-item {
    display: block !important; /* Tüm liste öğeleri blok yapıda olur */
}



.col img {
    display: block; /* Resmi blok öğesi yaparak tam hizalama sağlar */
    margin: 30 auto; /* Ortalar */
    margin-top: 10px; /* Yazının hemen altına boşluk bırakır */
}

input::placeholder {
    text-align: center; /* Placeholder yazısını merkeze hizala */
    color: gray; /* Placeholder rengini ayarla (isteğe bağlı) */
}



.navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.9); /* Şeffaf arka plan */
    transition: background-color 0.3s ease; /* Geçiş efekti */
}

    /* Kaydırıldığında navbar'ı opak hale getir */
    .navbar.scrolled {
        background-color: rgba(255, 252, 252, 0.9); /* Hafif opak beyaz */
    }





@media (max-width: 768px) {

    .content img {
        height: 50vh; /* Görselin yüksekliğini ekranın yarısına yapar */
    }

    .btn-primary {
        width: 150px; /* Genişlik */
        height: 40px; /* Yükseklik */
        font-size: 14px; /* Yazı boyutu */
    }

    .mt-2 mb-5 {
        width: 100%;
    }

    #samsun-program-sayfa-1 {
        width: 100%;
    }

    #samsun-program-sayfa-2 {
        width: 100%;
    }

    .btn-about {
        height: 30px; /* Yükseklik */
        width: 100px; /* Genişlik */
    }
}


/* Mobil cihazlar için özel stil */
@media (max-width: 768px) {
    .header-image {
        width: 100%; /* Genişliği ekranın tamamını kapsar */
        height: 60px; /* İstediğiniz yükseklik */
        object-fit: cover; /* Resmi kesmeden yüksekliğe sığdırır */
    }
}


.custom-btn7 {
    background-color: white;
    color: #7b389f;
    width: 100px;
}

    .custom-btn7:hover {
        background-color: #7b389f;
        color: white !important;
    }