/* css/style.css */

/* GENEL TİPOGRAFİ VE TASARIM */
body { margin: 0; padding: 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #fff; color: #000; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: #000; }

/* FİXED & TRANSPARENT HEADER */
header { position: fixed; top: 0; left: 0; width: 100%; padding: 30px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; gap: 50px; z-index: 999; background-color: transparent; transition: background-color 0.4s ease, backdrop-filter 0.4s ease; }
header.scrolled { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); border-bottom: 1px solid rgba(0,0,0,0.05); }
.logo a { font-size: 11px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; }
nav { display: flex; gap: 30px; }
nav a { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: opacity 0.3s; color: #666; }
nav a:hover, nav a.active { opacity: 1; color: #000; }

/* GRID (BOŞLUKSUZ VE SOLDAN SAĞA SIRALI) */
.container { padding: 120px 20px 50px 20px; }

/* Grid Konteyneri */
.masonry { 
    display: grid;
    /* Mobilde 1 sütun */
    grid-template-columns: 1fr; 
    /* Satır ve sütunlar arası SIFIR boşluk */
    gap: 0; 
}

/* Tablette 2 Sütun */
@media(min-width: 768px) { 
    .masonry { grid-template-columns: repeat(2, 1fr); } 
}

/* Masaüstünde 3 Sütun */
@media(min-width: 1024px) { 
    .masonry { grid-template-columns: repeat(3, 1fr); } 
}

.masonry-item { 
    position: relative; 
    cursor: pointer; 
    align-self: start; 
}

.masonry-item img { 
    width: 100%; 
    height: auto; 
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block; 
    transition: opacity 0.3s ease; 
}

.masonry-item:hover img { opacity: 0.9; }

.masonry-title { 
    font-size: 9px; 
    font-weight: 500; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #333; 
    margin: 0; 
    padding: 10px 5px 25px 5px; 
    text-align: left; 
}

/* DİKEY VİDEO THUMBNAIL (FİLM SAYFASI) */
.video-thumb { position: relative; padding-bottom: 150%; overflow: hidden; background: #f8f8f8; }
.video-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.masonry-item:hover .video-thumb img { transform: scale(1.03); }
.play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.play-icon::after { content: ''; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #fff; margin-left: 4px; }

/* MODAL GENEL */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
.modal.active { display: block; opacity: 1; overflow: auto; }
#galleryModal.modal.active:before, #videoModal.modal.active:before { content: ""; position: fixed; width: 1000vh; height: 1000vw; top: -100vh; left: -100vw; background: #fffffff5; z-index: -1; }
#infoModal.modal.active { background: hsl(0deg 0% 100% / 95%); }
.close-btn { position: absolute; top: 30px; right: 50px; font-size: 24px; font-weight: 300; cursor: pointer; z-index: 1001; color: #000; }

/* SLIDER MODALI (İNDEX SAYFASI) */
.swiper { width: 100%; height: 100%; }
.swiper-slide { display: flex; justify-content: center; align-items: center; cursor: pointer; /* Boşluğa tıklandığını belli etmek için */ }
.swiper-slide img { max-width: 90%; max-height: 90vh; object-fit: contain; cursor: default; }

/* VİDEO MODALI (FİLM SAYFASI) */
.video-modal-content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; pointer-events: none; }
.video-modal-content iframe { width: 90%; height: 90vh; max-width: 1200px; pointer-events: auto; }

/* INFO MODALI (ORTAK) */
.info-content { padding: 90px 10%; max-width: 800px; display: flex; flex-direction: column; gap: 40px; pointer-events: none; }
.info-block { display: flex; flex-direction: column; gap: 10px; pointer-events: auto; }
.info-block strong { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #000; }
.info-block p, .info-block a { font-size: 12px; letter-spacing: 1px; color: #666; margin: 0; line-height: 2; }
.info-block a:hover { color: #000; }