.gallery-hero{

    max-width:1400px;

    margin:70px auto 40px;

    position:relative;

}

.gallery-hero img{

    width:100%;

    height:750px;

    object-fit:cover;

    border-radius:18px;

    display:block;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.hero-prev,
.hero-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

    font-size:24px;

    transition:.3s;

}

.hero-prev{

    left:-30px;

}

.hero-next{

    right:-30px;

}

.hero-prev:hover,
.hero-next:hover{

    background:#d62828;

    color:white;

}




/* =======================================
   GALERİ
======================================= */

#thumbnails{

    max-width:1300px;
    margin:70px auto;
    padding:0 20px;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:25px;

}

#thumbnails article{

    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;

}

#thumbnails article:hover{

    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,.15);

}

.thumbnail{

    display:block;
    overflow:hidden;

}

.thumbnail img{

    width:100%;
    height:260px;
    object-fit:cover;

    transition:.45s;

}

.thumbnail:hover img{

    transform:scale(1.08);

}

#thumbnails h2{

    font-size:22px;
    color:#2f5c88;

    padding:18px 20px 10px;
    margin:0;

}

#thumbnails p{

    padding:0 20px 22px;
    color:#666;
    line-height:1.7;
    margin:0;

}

@media(max-width:768px){

    #thumbnails{

        grid-template-columns:1fr;
        gap:20px;

    }

}


/* ==========================
        FULLSCREEN
========================== */

#galleryModal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.92);

    z-index:999999;

}

#galleryModal.show{

    display:flex;

}

#galleryImage{

    max-width:90vw;

    max-height:90vh;

    border-radius:12px;

    box-shadow:0 25px 60px rgba(0,0,0,.4);

}

#galleryClose,
#galleryPrev,
#galleryNext{

    position:absolute;

    color:#fff;

    cursor:pointer;

    user-select:none;

    font-size:42px;

    transition:.3s;

}

#galleryClose{

    top:35px;

    right:45px;

}

#galleryPrev{

    left:40px;

    top:50%;

    transform:translateY(-50%);

}

#galleryNext{

    right:40px;

    top:50%;

    transform:translateY(-50%);

}

#galleryClose:hover,
#galleryPrev:hover,
#galleryNext:hover{

    color:#ff3b3b;
    transform:scale(1.25);
    text-shadow:
        0 0 8px #ff3b3b,
        0 0 18px #ff3b3b,
        0 0 30px #ff3b3b;

}