/* Giriş, kayıt ve şifre sayfalarının sol paneli: mor zeminin üstünde saydam mezuniyet fotoğrafı */
.mezun-aside {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Geniş ekranda panel sayfanın %45'i (Metronic'te 400-600px sabitti; form tarafı gereğinden genişti) */
@media (min-width: 992px) {
    .login.login-1 .login-aside.mezun-aside {
        width: 45%;
        max-width: none;
    }
}

/* Fotoğraf panelin alt kısmında; üst kenarı mor zemine doğru erir */
.mezun-aside-foto {
    position: absolute;
    top: 30%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;
    background: url(../media/mezuniyet.jpg?v=2) 50% 100% / cover no-repeat;
    opacity: .6;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 35%, #000 65%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .55) 35%, #000 65%);
}

/* Altta koyulaşan mor katman: telif yazısı fotoğrafın üstünde okunur kalır */
.mezun-aside::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(38, 18, 110, 0) 45%, rgba(38, 18, 110, .35) 70%, rgba(24, 10, 70, .88) 100%);
    pointer-events: none;
}

.mezun-aside h3,
.mezun-aside h4 {
    text-shadow: 0 1px 10px rgba(10, 4, 40, .35);
}

/* Telefon ve tablette panel sayfanın üstünde bir şerit: fotoğraf tüm şeridi kaplar, daha soluk */
@media (max-width: 991.98px) {
    .mezun-aside-foto {
        top: 0;
        opacity: .35;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .mezun-aside::after {
        background: linear-gradient(to bottom, rgba(38, 18, 110, .2) 0%, rgba(24, 10, 70, .55) 100%);
    }
}