/* ==========================================================================
   F1 Foto & Video — Özel düzeltmeler (responsive galeri, tasarım, SEO)
   ========================================================================== */

/* --- PORTFÖY / GALERİ KARTLARI: eşit, hizalı, responsive grid --- */
#portfolio-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    margin: 0 auto 60px auto;
    font-size: 0; /* inline-block boşluğu sıfırla */
}
#portfolio-container figure{
    width: auto !important;
    min-width: 0 !important;   /* grid item taşmasını engelle (görsel doğal genişliği) */
    max-width: 100%;
    margin: 0 !important;
    display: block;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 3;      /* tüm kartlar aynı orana sahip */
    background: #111;
}
#portfolio-container figure img{
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    object-fit: cover;         /* görseli ezmeden kırparak doldur */
    object-position: center;
    display: block;
    max-width: 100% !important;
    transition: transform .5s ease;
}
#portfolio-container figure:hover img{
    transform: scale(1.06);    /* zarif zoom */
}
/* figcaption ve lightbox linki figürü tam kaplasın */
#portfolio-container figure figcaption,
#portfolio-container figure > a{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
/* galeri.php içindeki lightbox <a><img></a> görünmesin, sadece tıklanır olsun */
#portfolio-container figure figcaption a#single_image,
#portfolio-container figure figcaption a{
    position: absolute; top:0; left:0; width:100%; height:100%;
    opacity: 0; font-size: 0;
}

/* Tablet */
@media (max-width: 991px){
    #portfolio-container{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* Telefon */
@media (max-width: 575px){
    #portfolio-container{ grid-template-columns: 1fr; gap: 10px; }
    #portfolio-container figure{ aspect-ratio: 3 / 2; }
}

/* --- HEADER SLIDER: görsel header'ı TAM kaplasın (yarım arkaplan sorunu) --- */
#header-slider,
#header-slider .flex-viewport,
#header-slider .slides,
#header-slider .slides > li,
#image-slider,
#image-slider .flex-viewport,
#image-slider .slides,
#image-slider .slides > li{
    height: 100% !important;
}
#header-slider .slides > li,
#image-slider .slides > li{
    position: relative;
}
#header-slider .slides > li img,
#image-slider .slides > li img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Tek görselli iletişim header'ı: görsel header'ı garantili kaplasın */
#image-slider{
    position: absolute !important;
    top: 0; left: 0;
    width: 100%;
    height: 100% !important;
    overflow: hidden;
    z-index: 0;
}
#image-slider .slides,
#image-slider .slides > li{
    height: 100% !important;
}
#image-slider .slides > li{
    display: block !important;   /* flexslider gizlemesini geçersiz kıl */
}
#image-slider .slides > li img{
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* --- İÇ SAYFA HEADER: dev hero yerine düzgün banner --- */
body.ic-sayfa #header.big{
    min-height: 68vh;
    height: 68vh;
}
@media (max-width: 767px){
    body.ic-sayfa #header.big{ min-height: 52vh; height: 52vh; }
}

/* --- GALERİ VİDEO KARTLARI --- */
#portfolio-container figure.video-item{
    position: relative;
    background: #000;
}
#portfolio-container figure.video-item .galeri-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
#portfolio-container figure.video-item .video-badge{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    border: 2px solid rgba(255,255,255,.85);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    cursor: pointer;
    pointer-events: auto;
    transition: opacity .3s, background .3s;
    z-index: 3;
}
#portfolio-container figure.video-item .video-badge:hover{ background: rgba(0,0,0,.7); }
#portfolio-container figure.video-item .video-badge i{ margin-left: 4px; }
#portfolio-container figure.video-item.playing .video-badge{ opacity: 0; }
#portfolio-container figure.video-item .video-caption{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 30px 16px 12px;
    margin: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
    color: #fff;
    pointer-events: none;
    z-index: 2;
}
#portfolio-container figure.video-item .video-caption h4{
    margin: 0; font-size: 15px; color: #fff;
}

/* --- HAKKIMIZDA görseli responsive --- */
.single-post .image-slider img{
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* --- Genel küçük iyileştirmeler --- */
img{ max-width: 100%; }
#footer-logo{ max-width: 160px; height: auto; }

/* --- YENİ LOGO (kare format) header navigasyonuna uyum --- */
/* Orijinalde width:24%, float:left, background-position:center ile ortalıydı;
   genişliğe/float'a DOKUNMUYORUZ. Sadece boyut ve yükseklik ayarı. */
a#logo-navigation{
    height: 92px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    top: -8px !important;
}
@media (max-width: 767px){
    a#logo-navigation{ height: 66px !important; }
}
/* Logo altındaki "PROFESYONEL FOTOĞRAFÇILIK" yazısını kaldır (logo ile çakışıyordu) */
a#logo-navigation span{ display: none !important; }

/* İletişim kutuları mobilde alt alta düzgün dursun */
@media (max-width: 767px){
    .contact-boxes{ display: flex; flex-direction: column; gap: 16px; }
    .contact-box{ width: 100% !important; float: none !important; margin: 0 !important; }
    .skills .skill{ display: block; width: 100%; }
}