/*
    Web Design + Frontend : Volkan SAGLIK
*/

@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*
font-family: "Merienda", cursive;  // Baslıklar İçin Kullanılacak
font-family: 'Roboto', sans-serif;  // Text metinler için kullanılacak
*/

/***************
    reset
***************/
*,
*::before,
*::after{box-sizing: border-box}
body{min-height: 100dvh}
html,body{margin:0;padding:0;line-height:1.25;font-size: 14px;font-family: 'Roboto', sans-serif;font-weight: 400}
a{text-decoration:none}
h1,h2,h3,h4,h5{margin: 0;padding: 0;font-weight: 700;text-wrap:balance}
p, span{margin: 0;padding: 0;font-family:'Roboto', sans-serif; line-height: 26px}
dl, ol, ul{list-style:none;padding: 0;margin: 0}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
img{width: 100%;}

/***************
    design system
***************/

:root{
    --bgColor:#F5F7F8;;
    --whiteColor:#fff;
    --blackColor:#000;
    --textColor:#353535;
    --lightColor:#aaa;
    --borderColor:#EFF3F9;
    --blueColor:#0D6986;
    --orangeColor:#FF9426;
    --redColor:#E6272D;
    --radius4:4px;
    --radius10:10px;
    --boxShadow: 0px 1px 7px rgba(125,143,170,0.1);
    --transition:all .5s ease;
}

.bosluk{
    height: 600px;
    margin-top: 400px;
}

.video-overlay {
    background: linear-gradient(
    to bottom,
        rgba(0, 0, 0, 0.7) 10%,
        rgba(0, 0, 0, 0.0) 50%,
        rgba(0, 0, 0, 0.5) 95%
    );
}

#bgVideo {
    object-fit: cover;
}

button#toggleVideo {
    border-radius: 50%;
    background: unset;
    color: var(--whiteColor);
    border: 3px solid var(--whiteColor);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.head{
    margin-top: 24px;
}

img.head-logo{
    height:50px;width: auto;
}

.phone-link {
    color: white;
    font-weight: bold;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

.headBtns{
    position: relative; margin-bottom: 24px;

    a.head-btn{
        background-color: rgba(255,255,255,.7);color: var(--blackColor);font-weight: 700;font-size: 1rem;border-radius: var(--radius10);
        padding:8px 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: var(--transition);

        &:hover{
            background: var(--whiteColor);
        }

        img{
            width: 24px;height: 24px;margin-right: 8px;
        }
    }
}

img.head-phone{width: 36px; height: 36px;margin-right: 8px}

#video-gallery {
    position: relative;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 317px;
        background-image: url(../images/siluet.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        pointer-events: none;
        z-index: 0;
    }

    h3.slogan {
        position: relative;
        z-index: 1;
        text-align: center;
        font-family: "Merienda", cursive;
        font-size: 2rem;
        padding: 36px 0;
        font-weight: 400;

        span {
            font-weight: 900;font-family: "Merienda", cursive;
            position: relative;

            &:after{
                content: "";
                position: absolute;
                bottom: -5px;
                right: 0;
                width: 225px;
                height: 6px;
                border-radius: var(--radius10);
                background: var(--redColor);
            }
        }
    }
}

.video-swiper {
    .swiper-slide {
        .video-thumb {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;

            img {
                width: 100%;
                height: auto;
            }

            img.short-icon {
                width: 42px;
                height: 44px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 2rem;
                color: white;
            }

        &::before {
            content: "";
            position: absolute;
            inset: 0;
        pointer-events: none;
        background: linear-gradient(
        to bottom,
        rgba(230, 39, 45, 0)   0%,
        rgba(230, 39, 45, 0.4) 100%
        );
            transition: opacity 0.3s ease;
        }

        &:hover::before {
            opacity: 0;
        }
        }
    }
}

.modal-nav {
    background: rgba(0,0,0,0.5);
    border: none;
    width: 3rem; height: 3rem;
    display: flex; align-items: center; justify-content: center;
    color: white;
    &:hover { background: rgba(0,0,0,0.7); }
}

#info-cards{
    margin: 72px auto;
}

.custom-card {
    border:1px solid var(--borderColor);
    box-shadow: var(--boxShadow);
    border-radius: var(--radius10);

    .badgeColor1{background-color: var(--redColor)}
    .badgeColor2{background-color: var(--orangeColor)}
    .badgeColor3{background-color: var(--blueColor)}

    span.badge{
        font-family: "Merienda", cursive;
        padding: 8px 20px;
        margin:8px 0 12px;
        color: var(--whiteColor);
        font-weight: 600;
        font-size: 12px;
    }

    h5.card-title{
        font-size: 1.25rem;
        margin-left: 5px;
    }

    li {
        line-height: 1.75;
        margin-left:10px;
        a {
            font-size: 15px;
            font-weight: 300;
            color: var(--textColor);
            transition: var(--transition);

            &:hover{
                color: var(--blueColor); font-weight: 500;
            }
        }
    }
    .socialMedia{
        a {
            font-size: 11px;
        }
    }
}

#campus-section {
    height: 600px;

    h2#campus-title{
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    p#campus-desc{
        font-size: 1.1rem;
    }

    #campus-bg {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: 1;
        filter: brightness(0.3);
        transition: background-image 0.5s ease-in-out;
    }

    .container {
        z-index: 2;
    }

    h2, p {
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    }


.row-g3-top {
    .btn-campus {
        img {
            width: 200px;
            height: 250px;
            object-fit: cover;
        }
    }
}

.row-g3-bottom {
    .btn-campus {
        img {
            width: 310px;
            height: 180px;
            object-fit: cover;
        }
    }
}

    .btn-campus {
        position: relative;
        width: 120px;
        border-radius: var(--radius10);

        img {
            display: block;
            border-radius: var(--radius10) !important;
        }
        .campus-title {
            position: absolute;
            bottom: 6px;
            width: 100%;
            text-align: center;
            color: var(--whiteColor);
            font-weight: 700;
            font-size: 1.1rem;
        }

        &::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                    to bottom,
                    rgba(87, 0, 3, 0.05) 0%,
                    rgba(87, 0, 3, 0.80) 100%
            );
            transition: opacity 0.3s ease;
            border-radius: var(--radius10);
        }

        &.active::before {
            opacity: 0;
        }
    }
}

#stats {
    position: relative;margin-top: 72px;

    .custom-card {
        border: 1px solid var(--borderColor);
        border-radius: var(--radius10);
        box-shadow: var(--boxShadow);
        background-color: var(--whiteColor);

    h6{
        font-size: 1.2rem;
        font-weight: 600;
        margin-top: 4px;
        color: var(--textColor);
    }

    img {
        width: 52px;
        height: 52px;
    }

        .counter {
            color: var(--blueColor);
            margin-top: 4px;font-weight: 800;font-size: 2.1rem;
        }
    }
}

.footer-gallery {
    position: relative; margin-top: 72px;

    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 300px;
        height: 275px;
        pointer-events: none;
        transform: translateY(-50%);
        z-index: 10;
    }

    &::before {
        left: 0;
        background: linear-gradient(
                to right,
                rgba(255, 255, 255, 1)   0%,
                rgba(255, 255, 255, 0) 100%
        );
    }

    &::after {
        right: 0;
        background: linear-gradient(
                to left,
                rgba(255, 255, 255, 1)   0%,
                rgba(255, 255, 255, 0) 100%
        );
    }

    .footer-swiper {
        .swiper-wrapper {
        }
        .swiper-slide {
            width: 200px;
            height: 250px;
            flex-shrink: 0;
            border-radius: var(--radius10);
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
        }
    }
}

footer {
    background-color: var(--bgColor);
    padding: 12px;
    margin-top: 72px;

img {
    width:auto;
    height: 50px;
    margin-bottom: 8px;
}
    .text-muted {
        font-size: 0.875rem;font-weight: 600; color:var(--blackColor);
        a{
            color: var(--textColor);
        }
    }
}

/*--------- fakulte kismi -----------*/

#faculty-header {
    background-image: url("../images/fakulteBg.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

&::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85) 18%,
        rgba(0, 0, 0, 0.35) 100%
        );
        z-index: 1;
}
    .header-bar {
        z-index: 2;
        margin-top: 24px;
    .phone-link {
        font-weight: 600;
        text-decoration: none;
        &:hover { text-decoration: underline; }
        }
    }

   img.item-logo{
       height: 50px;
       width: auto;
   }

    h2{
        text-align: left;font-family: "Merienda", cursive;font-size: 3rem;font-weight: 800;margin-bottom: 32px;
    }


}

.hex-img {
    width: 90%;
    height: auto;
}

.hex-img,
.fix-list {
    opacity: 0;
    transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

.hex-img {
    transform: translateX(-100px);
}

.fix-list {
    transform: translateX(100px);
}

.hex-img.visible,
.fix-list.visible {
    opacity: 1;
    transform: translateX(0);
}

.faculty-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;

    li {
        position: relative;
        text-align: left;
        font-size: 1.75rem;
        font-weight: 600;
        padding-left: 2rem;

        &::before {
            content: "\f0da";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}
   .scroll-indicator {
       pointer-events: auto;
       cursor: pointer;
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       z-index: 5;

       img {
           display: block;
           animation: bounce 2s ease-in-out infinite;
       }
   }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

#faculty-content {
    position: relative; background: var(--bgColor);
    padding: 36px 0;

    .fakulteItem{
        background: var(--whiteColor);border-radius: var(--radius4); padding: 1rem;

        .faculty-img-3d {
            perspective: 1500px;
            width: fit-content;
            margin: 0 auto;
            padding: 20px;
            position: relative;

            &::before {
                content: "";
                position: absolute;
                top: 140px;
                right: 100px;
                width: 156px;
                height: 156px;
                background-image: url("../images/fakulteItem-siluet.png");
                background-size: cover;
                background-position: center;
                z-index: -1;
            }

            img {
                display: block;
                border-radius: var(--radius4);
                transition: transform 1s ease;
            }

            .faculty-img-main {
                width: 80%;
                transform: rotateY(-16deg);
                transform-origin: left center;
            }

            .faculty-img-preview {
                position: absolute;
                bottom: 0;
                right: 30px;
                width: 270px;
                transform: rotateY(20deg);
                transform-origin: right center;
            }

            &:hover {
                .faculty-img-main,
                .faculty-img-preview {
                    transform: rotateY(0deg);
                }
            }
        }

        .fakulteItem-list{

            h3{
                color: var(--redColor);font-size: 1.5rem;
            }

            ul  {
            list-style: none;
            padding: 0;
            margin: 0;

                li {
                    position: relative;
                    padding-left: 1rem;
                    margin-bottom: .75rem;
                    font-size: 1.1rem;
                    a{
                        color: var(--textColor);
                        font-weight: 500;
                        transition: var(--transition);

                    &::before {
                        content: "\f0da";
                        font-family: "Font Awesome 6 Free";
                        font-weight: 900;
                        position: absolute;
                        left: 0;
                        top: 0;
                        color: var(--textColor);
                    }
                        &:hover{
                            color: var(--blueColor);
                            margin-left: .5rem;
                        }
                    }
                }
            }

        }


    }
}


.icerik{
    margin: 16px 0;

    p{
        font-size: 15px; color: var(--textColor);margin-bottom: 12px;
    }

    a {
        color: var(--blueColor);font-weight: 600;
    }

    ul{
        margin: 12px 0;
        li{
            margin: 10px;
            a{
                display: block;
                padding: 8px 0;
                font-weight: 400; color: var(--textColor);transition: var(--transition);

                &:hover{
                    color: var(--blueColor);
                }
            }
        }
    }
}

/*------ Ceren Css ---------*/
.inner-body{background:var(--bgColor);padding:36px 0}
.inner-head{width:100%;height:400px;overflow:hidden;background-image: url("../images/neden_hbv.png");background-repeat: no-repeat;background-size: cover;background-position: center center;}
.inner-head img.head-img{width:100%;height:100%;object-fit:cover;display:block}
.inner-head .container,.inner-head .inner-head-content{position:relative;}
.inner-head-content h1{font-size:2.75rem;font-family:"Merienda",cursive;padding-bottom: 12px}
.inner-head-content a{color:var(--whiteColor);border:1px solid var(--whiteColor);border-radius:20px;padding:10px;margin-bottom:24px;text-decoration:none;transition:var(--transition)}
.inner-head-content a:hover{background-color:var(--whiteColor);color:var(--blueColor)}
.inner-shortcut{background-color:var(--whiteColor);border-radius:5px;padding:0;margin:0}
.inner-shortcut ul{list-style:none;padding:0;margin:0}
.inner-shortcut li a{display:block;padding:15px;text-decoration:none;color:var(--textColor);transition:var(--transition);font-weight:500}
.inner-shortcut li a:hover, .inner-shortcut li a.active{background-color:var(--orangeColor);color:var(--whiteColor)}
.inner-shortcut li:first-child a{border-top-left-radius:5px;border-top-right-radius:5px}
.inner-shortcut li:last-child a{border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.inner-shortcut li:first-child a:hover{border-top-left-radius:5px;border-top-right-radius:5px}
.inner-shortcut li:last-child a:hover{border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.inner-main-content{background-color:var(--whiteColor);border-radius:5px}
.main-title{background-color:var(--bgColor);border-radius:5px;margin-top:5px}
.table-header{background-color:var(--redColor);color:var(--whiteColor)}
.table-border{border-radius:var(--radius4);overflow:hidden}
.table-content th,.table-content td{padding:1rem;vertical-align:middle}
.yerleskeler-tabs .nav-link {border: 2px solid var(--bgColor)}
#map{height:600px;width:100%;z-index: 0}
.leaflet-popup-content{font-size:14px;line-height:1.4}
.leaflet-popup-content a{display:inline-block;margin-top:8px;padding:6px 10px;background:#007bff;color:#fff!important;border-radius:5px;text-decoration:none}
.leaflet-popup-content a:hover{background:#0056b3;color:#fff}
.contact{background:var(--bgColor)}
.yerleskeler{background-color:#FFF;border-radius:5px;padding:20px;}
.yerleskeler-title{background-color:#f5f7f8;border-radius:5px}
.yerleskeler-title p{font-size:16px;font-weight:700}
.yerleskeler-tabs{border-radius:5px}
.yerleskeler-tabs ul li a{color:#000;font-weight:700}
.yerleskeler-tabs ul li a:hover{color:#FF9426}
.yerleskeler-tabs .nav-link.active{background-color:#FF9426!important;color:#fff!important}
.yerleske-content{background-color:var(--bgColor);padding:15px;border-radius:5px;margin-bottom:15px}
#yerleskeTabContent{padding-left:10px}
.card-logo{width:30px;height:auto}
.btncontact-setting{background-color:#353535;color:#FFF;transition:all .5s ease}
.btncontact-setting:hover{background-color:#FF9426;color:#fff}
.contact-form{background-color:var(--bgColor);padding:15px;border-radius:5px}
.adresses{padding: 36px 0}
.offcanvas-body{
    ul{

        li{
            display: flex;
            flex-direction: column;
            text-align: left;

            a{
                color: var(--blackColor);
                font-size: 1rem;
                img{width: 24px;margin-right: 4px}
                border-bottom: 1px solid #eee;
                padding: 12px 4px;
            }

        }
    }
}

button.btn-menu{
    border-radius: 50%;
    background: unset;
    color: var(--whiteColor);
    border: 3px solid var(--whiteColor);
    width: 36px;
    height: 36px;
    margin:0 6px;

    &:hover{
        color: var(--whiteColor);
        border: 3px solid var(--whiteColor);
    }

    i{font-size: 12px}
}



.shortKapat{
    background: #fff;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
    border-radius: 50%;
    border: 4px solid var(--redColor);
    display: flex;
    align-items: center;
    justify-content: center;
}


.swiper-button-next, .swiper-button-prev {color: var(--whiteColor) !important}