/* ===========================
        GALERİ — FOTOĞRAF & VİDEO KARTLARI
=========================== */

.gallery-subtitle {
    font-family: "Oswald", sans-serif;
    font-size: 22px;
    color: #222;
    margin: 50px 0 24px;
    text-align: center;
}

.gallery-subtitle:first-of-type {
    margin-top: 10px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-bottom: 10px;
}

/* Kartlar dururken bile hafif "süzülen" bir gölge etkisi versin diye
   taban durumda da belirgin bir box-shadow var, hover'da bu artıyor. */
.gallery-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
    transition: transform .35s ease, box-shadow .35s ease;
}

.gallery-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 40px rgba(0, 0, 0, .20), 0 0 24px rgba(242, 183, 5, .18);
}

.gallery-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.gallery-card .gallery-caption {
    padding: 14px 18px;
    color: #444;
    font-size: 14px;
    font-weight: 500;
}

/* Video kartları: aynı çerçeve, içinde 16:9 oranlı iframe */
.gallery-video-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
    transition: transform .35s ease, box-shadow .35s ease;
}

.gallery-video-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 40px rgba(0, 0, 0, .20), 0 0 24px rgba(242, 183, 5, .18);
}

.gallery-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #111;
}

.gallery-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.gallery-video-card .gallery-caption {
    padding: 14px 18px;
    color: #444;
    font-size: 14px;
    font-weight: 500;
}

/* İçerik henüz eklenmediyse gösterilecek placeholder kart */
.gallery-empty-note {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    font-size: 14px;
    padding: 20px;
    border: 2px dashed #ddd;
    border-radius: 12px;
}

@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    .gallery-card img {
        height: 200px;
    }
}
.gallery-video-card {
    max-width: 500px;
    margin: 0 auto;
}
/* ===========================
        GALLERY MODAL
=========================== */

.gallery-card img,
.gallery-video-card iframe{
    cursor:pointer;
}

.gallery-modal{

    position:fixed;
    inset:0;

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

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:999999;

    padding:40px;

}

.gallery-modal.active{

    opacity:1;
    visibility:visible;

}

.gallery-modal-content{

    position:relative;

    max-width:1200px;
    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

}

.gallery-modal-image{

    display:none;

    max-width:100%;
    max-height:90vh;

    border-radius:16px;

    box-shadow:0 20px 60px rgba(0,0,0,.5);

    animation:zoomIn .3s ease;

}

.gallery-modal-video{

    width:100%;

    display:flex;
    justify-content:center;

}

.gallery-modal-video iframe{

    width:min(1100px,95vw);

    aspect-ratio:16/9;

    border:none;

    border-radius:16px;

    background:black;

    animation:zoomIn .3s ease;

}

.gallery-close{

    position:absolute;

    top:25px;
    right:35px;

    color:white;

    font-size:48px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

    user-select:none;

    z-index:2;

}

.gallery-close:hover{

    color:#f2b705;

    transform:scale(1.15);

}

@keyframes zoomIn{

    from{

        opacity:0;
        transform:scale(.8);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@media(max-width:768px){

    .gallery-modal{

        padding:15px;

    }

    .gallery-close{

        top:10px;
        right:18px;

        font-size:36px;

    }

}
/*==================================
VIDEO THUMBNAIL
==================================*/

.gallery-video-card{

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    transition:.35s;

    max-width:500px;

    margin:auto;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.gallery-video-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.gallery-video-thumbnail{

    position:relative;

    overflow:hidden;

}

.gallery-video-thumbnail img{

    display:block;

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.4s;

}

.gallery-video-card:hover img{

    transform:scale(1.05);

}

.play-button{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:72px;

    color:white;

    text-shadow:0 8px 18px rgba(0,0,0,.6);

    transition:.3s;

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

}

.gallery-video-card:hover .play-button{

    transform:scale(1.15);

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

}



/*==================================
MODAL
==================================*/

.gallery-modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999999;

    padding:40px;

}

.gallery-modal.active{

    opacity:1;

    visibility:visible;

}

.gallery-modal-content{

    position:relative;

    width:100%;

    max-width:1200px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.gallery-modal-image{

    display:none;

    max-width:100%;

    max-height:90vh;

    border-radius:18px;

}

.gallery-modal-video{

    width:100%;

    display:flex;

    justify-content:center;

}

.gallery-modal-video iframe{

    width:min(1200px,95vw);

    aspect-ratio:16/9;

    border:none;

    border-radius:16px;

}

.gallery-close{

    position:absolute;

    right:35px;

    top:20px;

    color:white;

    font-size:52px;

    cursor:pointer;

    user-select:none;

    transition:.25s;

}

.gallery-close:hover{

    color:#f2b705;

    transform:scale(1.2);

}

@media(max-width:768px){

    .gallery-video-thumbnail img{

        height:220px;

    }

    .gallery-modal{

        padding:15px;

    }

}