/* ufukenginaydin.com — ön yüz stilleri (mobil öncelikli, açık/koyu tema) */
* { box-sizing: border-box; }

/* Site tek temalıdır: koyu. (Açık/koyu geçişi kaldırıldı) */
:root {
    --zemin: #101010;
    --zemin-2: #1a1a1a;
    --metin: #ece9e2;
    --soluk: #9d9a92;
    --cizgi: #2b2b2b;
    --vurgu: #c9a227;
    --golge: rgba(0, 0, 0, .55);
}

html { scroll-behavior: smooth; }
body {
    margin: 0;
    overflow-x: hidden; /* dar ekranlarda yatay kaymayı önler */
    background: var(--zemin);
    color: var(--metin);
    font: 16px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, .logo, .dev-404 {
    /* Georgia önde: her platformda var, başlıklar cihazdan cihaza değişmez.
       (Playfair Display hiçbir yerden yüklenmiyordu; CSP dış fonta da izin
       vermez — istenirse woff2 self-host edilip başa eklenebilir) */
    font-family: Georgia, "Playfair Display", "Times New Roman", serif;
    font-weight: 500;
    letter-spacing: .02em;
}

/* Klavye kullanıcıları için görünür odak halkası */
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

/* Ekran okuyucuya açık, görsel olarak gizli */
.gorunmez {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* İçeriğe atla linki — sadece odaklanınca görünür */
.atlama-linki {
    position: absolute;
    left: .8rem; top: -3rem;
    z-index: 200;
    background: var(--vurgu);
    color: #111;
    padding: .5rem 1rem;
    border-radius: 6px;
    transition: top .15s;
}
.atlama-linki:focus { top: .8rem; }

/* ---- Üst menü ---- */
.site-ust {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem clamp(1rem, 4vw, 2.5rem);
    /* Düz opak zemin — buzlu cam efekti fotoğrafları bulanıklaştırdığı
       için kaldırıldı; menü altına giren fotoğraf net kalır */
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
}
.ana-sayfa .site-ust {
    position: fixed;
    left: 0; right: 0;
    background: linear-gradient(rgba(0,0,0,.45), transparent);
    border-bottom: 0;
    color: #fff;
}
.logo { display: flex; align-items: center; }
.logo img {
    height: 56px;
    width: auto; /* 697x249 oranı korunur (~118px genişlik) */
    display: block;
}
.site-nav { display: flex; align-items: center; gap: clamp(.4rem, 2vw, 1.2rem); }
.site-nav a {
    white-space: nowrap;
    font-size: .92rem;
    color: var(--soluk);
    padding: .55rem .5rem; /* dokunma hedefini büyütür */
    border-bottom: 1px solid transparent;
    transition: color .2s;
}
.ana-sayfa .site-nav a { color: rgba(255,255,255,.75); }
.site-nav a:hover { color: var(--metin); }
.ana-sayfa .site-nav a:hover { color: #fff; }
.site-nav a.aktif { color: var(--metin); border-bottom-color: var(--vurgu); }
.ana-sayfa .site-nav a.aktif { color: #fff; }
/* ---- Hamburger menü ----
   Ölçüm: menünün mobil kurallarıyla ihtiyacı ~423px; iPhone SE'de (375px)
   48px taşıyordu. 640px altında bağlantılar düğmenin altına toplanır. */
.menu-dugme {
    display: none; /* geniş ekranda gizli — menü zaten sığıyor */
    width: 44px; height: 44px; /* dokunma hedefi */
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
}
/* Üç çizgi: orta çizgi elemanın kendisi, diğer ikisi ::before/::after */
.menu-cizgiler { position: relative; }
.menu-cizgiler,
.menu-cizgiler::before,
.menu-cizgiler::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}
.menu-cizgiler::before, .menu-cizgiler::after { content: ""; position: absolute; }
.menu-cizgiler::before { transform: translateY(-7px); }
.menu-cizgiler::after { transform: translateY(7px); }
/* Açıkken çarpıya dönüşür */
[aria-expanded="true"] .menu-cizgiler { background: transparent; }
[aria-expanded="true"] .menu-cizgiler::before { transform: rotate(45deg); }
[aria-expanded="true"] .menu-cizgiler::after { transform: rotate(-45deg); }

@media (max-width: 640px) {
    .site-ust { padding: .5rem .7rem; gap: .5rem; position: relative; }
    .logo img { height: 44px; } /* dar ekranda menüye yer kalsın */
    .menu-dugme { display: flex; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: .5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-width: 190px;
        padding: .35rem;
        /* Opak zemin: buzlu cam fotoğrafı bulanıklaştırdığı için kullanılmıyor */
        background: var(--zemin);
        border: 1px solid var(--cizgi);
        border-radius: 10px;
        box-shadow: 0 14px 34px var(--golge);
    }
    .site-nav.acik { display: flex; }
    .site-nav a {
        font-size: .96rem;
        padding: .7rem .8rem; /* rahat dokunma hedefi */
        border-bottom: 0;
        border-radius: 7px;
    }
    /* Ana sayfada menü beyaz yazılıdır; açılır panelde zemin koyu olduğu için
       okunaklı kalır, yalnızca etkin bağlantı vurgulanır */
    .site-nav a.aktif,
    .ana-sayfa .site-nav a.aktif { color: var(--vurgu); background: var(--zemin-2); }
    .ana-sayfa .site-nav a { color: var(--metin); }
}

/* ---- Ana sayfa slaytı ---- */
.slayt {
    position: relative;
    height: 100vh;
    height: 100dvh; /* mobil tarayıcı çubukları hesaba katılır */
    overflow: hidden;
    background: #000;
}
.slayt-kare {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.slayt-kare.gorunur { opacity: 1; }
.slayt-kare picture { display: block; width: 100%; height: 100%; }
/* Fotoğraflar statiktir; slaytlar arası yalnızca çapraz geçiş (crossfade) vardır */
.slayt-kare img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Panelden ayarlanan odak noktası; ayarlanmamışsa merkez */
    object-position: var(--kadraj-konum, 50% 50%);
}

/* Dikey vitrin fotoğrafı: tamamı ekrana sığar (contain), yanlarda kalan
   boşluğu aynı fotoğrafın bulanık kopyası doldurur — hiçbir yeri kırpılmaz */
.slayt-fon { position: absolute; inset: 0; }
.slayt-fon img {
    filter: blur(26px) brightness(.72);
    transform: scale(1.15); /* blur'un kenarlardaki şeffaf sızmasını örter */
}
.slayt-kare.dikey .slayt-net { position: relative; } /* fon katmanının üstünde kalır */
.slayt-kare.dikey .slayt-net img { object-fit: contain; object-position: 50% 50%; }

/* Dikey ekranda (telefon) dikey foto zaten tam oturur:
   bulanık zemine gerek yok, tam ekran kırpma (cover) daha şık */
@media (orientation: portrait) {
    .slayt-fon { display: none; }
    .slayt-kare.dikey .slayt-net img {
        object-fit: cover;
        object-position: var(--kadraj-konum, 50% 50%);
    }
}
.slayt-bos {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, #2b2b2b, #101010);
}
.slayt-icerik {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.35));
    padding: 1rem;
}
.slayt-icerik h1 {
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    margin: 0;
    text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.slayt-icerik p {
    letter-spacing: .35em;
    text-transform: uppercase;
    font-size: clamp(.62rem, 2vw, .82rem);
    color: rgba(255,255,255,.85);
    margin: 1rem 0 2rem;
}
.galeri-dugme {
    display: inline-block;
    border: 1px solid rgba(255,255,255,.7);
    color: #fff;
    padding: .7rem 2rem;
    letter-spacing: .15em;
    font-size: .85rem;
    text-transform: uppercase;
    transition: background .25s, color .25s, border-color .25s;
}
.galeri-dugme:hover { background: #fff; color: #111; }
.slayt-noktalar {
    position: absolute;
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: .1rem;
}
/* Noktalar artık düğme: küçük görünür, dokunma alanı padding ile geniş */
.slayt-noktalar button {
    background: none;
    border: 0;
    padding: .55rem .35rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.slayt-noktalar button::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transition: background .3s, transform .3s;
}
.slayt-noktalar button.aktif::before { background: #fff; transform: scale(1.25); }

/* Duraklat/başlat düğmesi — noktaların sağ tarafında */
.slayt-durdur {
    position: absolute;
    bottom: max(.85rem, env(safe-area-inset-bottom));
    right: max(1rem, env(safe-area-inset-right));
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.slayt-durdur:hover { background: rgba(0, 0, 0, .6); color: #fff; }
.slayt-durdur .ikon-oynat { display: none; }
.slayt-durdur[aria-pressed="true"] .ikon-durdur { display: none; }
.slayt-durdur[aria-pressed="true"] .ikon-oynat { display: block; }

@media (prefers-reduced-motion: reduce) {
    .slayt-kare { transition: none; } /* crossfade da hareketsiz olsun */
}

/* ---- Genel sayfa düzeni ---- */
.sayfa {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(1.2rem, 4vw, 2.5rem);
    min-height: 60vh;
}
.sayfa-baslik {
    /* Ölçüm: telefonda başlığa ~392px kalıyor; "2026.01.14 Tangosam Milonga"
       gibi uzun adlar 28px üstünde alt satıra kayıyordu. Alt sınır 1.35rem
       (21.6px) bu adları da tek satırda tutar, üst sınır masaüstünde
       41.6px'ten 35.2px'e iner. */
    font-size: clamp(1.35rem, 4.6vw, 2.2rem);
    /* Yine de kayarsa satırlar dengeli bölünsün, tek kelimelik sarkma olmasın */
    text-wrap: balance;
    overflow-wrap: break-word; /* boşluksuz çok uzun ad taşmasın */
    margin: .5rem 0 1rem;
    /* Serif aile (Playfair yok → cihazda Bodoni MT / Didot'ya düşüyordu, her
       cihazda başka görünüyordu) yerine gövde fontu: her yerde aynı ve tutarlı */
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---- Çekim arşivi: filtre paneli ----
   Tasarım kaynağı: "Çekimler Filtre Tasarımı" (3a varyantı).
   Çipler gerçek bağlantıdır; kayan altın gösterge ve +N daha JS süslemesidir. */
.filtre-panel {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    background: linear-gradient(#171717, #131313);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
    padding: .9rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    margin-bottom: .9rem;
}
.filtre-satir { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.filtre-etiket {
    flex: none;
    width: 74px;
    color: #6f6c65;
    font-size: .72rem;
    letter-spacing: .14em;
}
.cip-grup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    background: #0d0d0d;
    border-radius: 999px;
    padding: 3px;
}
.cip {
    white-space: nowrap;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    color: var(--soluk);
    position: relative;
    z-index: 1; /* kayan göstergenin üstünde kalır */
    transition: color .15s;
}
.cip:hover { color: var(--metin); }
/* JS yokken seçili çipin kendisi altın olur; JS gösterge kurunca zemini o devralır */
.cip.aktif { background: var(--vurgu); color: #141414; font-weight: 600; }
.cip-grup.js .cip.aktif { background: none; }
.cip.gizli { display: none; } /* +N daha kapalıyken taşan çipler */
.cip-daha { color: var(--vurgu); cursor: pointer; }
.cip-gosterge {
    position: absolute;
    border-radius: 999px;
    background: var(--vurgu);
    box-shadow: 0 2px 8px rgba(201, 162, 39, .35);
    pointer-events: none;
    opacity: 0;
    transition: left .3s cubic-bezier(.4, 0, .2, 1), top .3s cubic-bezier(.4, 0, .2, 1),
                width .3s cubic-bezier(.4, 0, .2, 1), height .3s, opacity .2s;
}
.cip-gosterge.hazir { opacity: 1; }

.arama-hap {
    flex: 1;
    min-width: 220px;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #0d0d0d;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .35rem 1rem;
    color: var(--soluk);
    cursor: text;
    transition: border-color .2s;
}
.arama-hap:focus-within { border-color: var(--vurgu); }
.arama-hap { position: relative; } /* öneri listesi buna göre konumlanır */
.oneri-liste {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    z-index: 30;
    background: #161616;
    border: 1px solid #2f2f2f;
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
    animation: ay-acil .2s ease both;
}
@media (prefers-reduced-motion: reduce) { .oneri-liste { animation: none; } }
.oneri-liste a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: .82rem;
    color: var(--metin);
}
.oneri-liste a:hover, .oneri-liste a:focus { background: #222; outline: none; }
.oneri-liste a svg { flex: none; color: var(--vurgu); }
.oneri-liste .oneri-ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oneri-liste .oneri-meta { flex: none; color: #6f6c65; font-size: .72rem; }
.oneri-bos { padding: 9px 12px; color: #6f6c65; font-size: .78rem; }

.arama-hap input {
    flex: 1;
    min-width: 0;
    font: inherit; /* 16px — iOS otomatik zoom yapmasın */
    padding: .25rem 0;
    background: none;
    border: 0;
    outline: none;
    color: var(--metin);
}

/* Yıl seçilince açılan ay şeridi (tasarımdaki akordeon) */
.ay-akordeon {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin: -0.2rem 0 .9rem;
    padding: .6rem .9rem;
    background: #0f0f0f;
    border: 1px solid var(--cizgi);
    border-radius: 14px;
    animation: ay-acil .25s ease both;
}
@keyframes ay-acil {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ay-akordeon { animation: none; }
}
.ay-akordeon .filtre-etiket { width: auto; margin-right: .3rem; }
.ay-cip {
    white-space: nowrap;
    padding: .4rem .9rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--soluk);
    transition: border-color .15s, color .15s;
}
.ay-cip:hover { border-color: var(--vurgu); color: var(--metin); }
.ay-cip.aktif {
    border-color: var(--vurgu);
    background: rgba(201, 162, 39, .14);
    color: #e6c964;
    font-weight: 600;
}

.filtre-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 .4rem 1.8rem;
    font-size: .82rem;
    color: #6f6c65;
}
.filtre-alt .vurgulu { color: var(--vurgu); }
.filtre-temizle { display: flex; align-items: center; gap: .5rem; color: var(--soluk); transition: color .2s; }
.filtre-temizle:hover { color: var(--metin); }
.filtre-rozet {
    background: var(--vurgu);
    color: #141414;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: .25rem .55rem;
}

/* Dar ekranda satır etiketi üstte durur, panel dolgusu küçülür */
@media (max-width: 560px) {
    .filtre-panel { padding: .7rem .7rem; }
    .filtre-satir { align-items: flex-start; flex-direction: column; gap: .35rem; }
    .filtre-etiket { width: auto; }
    .arama-hap { width: 100%; max-width: none; }
}

/* ---- Çekim arşivi: ay grupları ve kartlar ---- */
.ay-grubu { margin-bottom: 2.2rem; }
.ay-baslik {
    font-size: 1.15rem;
    color: var(--soluk);
    border-bottom: 1px solid var(--cizgi);
    padding-bottom: .4rem;
    margin: 0 0 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cekim-grid {
    display: grid;
    /* Dikey kartlar için kolonlar biraz daha dar tutulur */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.cekim-kart {
    display: flex;
    flex-direction: column;
    background: var(--zemin-2);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.cekim-kart:hover { transform: translateY(-3px); box-shadow: 0 10px 30px var(--golge); border-color: var(--vurgu); }
.kart-gorsel {
    display: block;
    aspect-ratio: 4 / 5; /* Instagram gönderi oranı — dikey fotoğraflara uygun */
    overflow: hidden;
    background: var(--zemin);
}
.kart-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Kadraj değerleri (panelden ayarlanır) site.js'te CSS değişkeni
       olarak atanır; hover büyümesi bunun üstüne çarpılır */
    object-position: var(--kadraj-konum, 50% 50%);
    transform-origin: var(--kadraj-konum, 50% 50%);
    transform: scale(var(--kadraj-zoom, 1));
    transition: transform .5s ease;
}
.cekim-kart:hover .kart-gorsel img { transform: scale(calc(var(--kadraj-zoom, 1) * 1.04)); }
.kapak-bos {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--cizgi);
}
.kart-bilgi { display: block; padding: .7rem .9rem .85rem; }
/* Başlık ve tarih aynı satırda, aynı punto: başlık esner ve gerekirse
   üç noktayla kısalır, tarih hiç kısalmaz (flex-shrink: 0) */
.kart-baslik-satir {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    /* Kart çok darsa tarih alt satıra düşer; başlık üç noktaya ezilmez */
    flex-wrap: wrap;
}
.kart-bilgi strong {
    /* en az 110px: bunun altına inmek yerine tarih alt satıra geçer */
    flex: 1 1 110px;
    min-width: 0; /* flex çocuğunun ellipsis yapabilmesi için şart */
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kart-baslik-satir time {
    flex-shrink: 0;
    font-weight: 400;
    color: var(--soluk);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kart-bilgi small { color: var(--soluk); }

/* ---- Video arşivi ---- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.video-kart {
    /* <button> varsayılanları sıfırlanır; görünüm çekim kartıyla aynı */
    font: inherit;
    text-align: left;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    color: inherit;
    background: var(--zemin-2);
    border: 1px solid var(--cizgi);
    border-radius: 8px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.video-kart:hover { transform: translateY(-3px); box-shadow: 0 10px 30px var(--golge); border-color: var(--vurgu); }
.kart-gorsel-video {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9; /* YouTube kapak kareleri her zaman yataydır */
    overflow: hidden;
    background: #000;
}
.kart-gorsel-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Panelden ayarlanan kadraj konumu; ayarlanmamışsa merkez */
    object-position: var(--kadraj-konum, 50% 50%);
    transition: transform .5s ease;
}
.video-kart:hover .kart-gorsel-video img { transform: scale(1.04); }

/* Dikey video kartı: kapak kırpılmadan tam görünür (contain), yanlarda
   kalan boşluğu aynı karenin bulanık kopyası doldurur — vitrindeki
   dikey fotoğraf tekniğinin aynısı */
.kart-gorsel-video .kapak-fon { position: absolute; inset: 0; }
.kart-gorsel-video .kapak-fon img {
    filter: blur(5px) brightness(.8);
    transform: scale(1.15); /* blur'un kenar sızmasını örter */
}
.kart-gorsel-video.dikey picture { position: relative; display: block; height: 100%; }
.kart-gorsel-video.dikey picture img { object-fit: contain; object-position: 50% 50%; }
.video-kart:hover .kart-gorsel-video.dikey .kapak-fon img { transform: scale(1.15); } /* fon sabit kalır */
.kart-gorsel-video .kapak-bos { display: block; height: 100%; background: radial-gradient(circle at 50% 40%, #232323, #0c0c0c); }
.oynat-rozeti {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    opacity: .9;
    transition: opacity .2s, transform .2s;
}
.video-kart:hover .oynat-rozeti { opacity: 1; transform: scale(1.06); }
.dikey-rozeti {
    position: absolute;
    top: .5rem;
    right: .5rem;
    background: rgba(0, 0, 0, .6);
    color: #ddd;
    font-size: .72rem;
    letter-spacing: .06em;
    padding: .15rem .5rem;
    border-radius: 4px;
}

/* Oynatıcı katmanı — lightbox ile aynı deneyim */
.video-oynatici {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #080808; /* lightbox ile aynı: arkadan sızıntı olmasın */
    display: none;
    align-items: center;
    justify-content: center;
}
.video-oynatici.acik { display: flex; }
.vo-cerceve {
    width: min(92vw, calc(88vh * 16 / 9));
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 12px 60px var(--golge);
}
.vo-cerceve.dikey {
    width: min(92vw, calc(88vh * 9 / 16));
    aspect-ratio: 9 / 16;
}
.vo-cerceve iframe,
.vo-cerceve video { width: 100%; height: 100%; border: 0; display: block; background: #000; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
    .video-kart, .video-kart:hover { transform: none; }
}

/* ---- Çekim detayı ---- */
.kirinti { margin-bottom: .4rem; }
.kirinti a { color: var(--soluk); font-size: .9rem; transition: color .2s; }
.kirinti a:hover { color: var(--vurgu); }
.cekim-baslik { margin-bottom: 1.6rem; }
.cekim-baslik .sayfa-baslik { margin-bottom: .3rem; }
.cekim-meta { color: var(--soluk); margin: 0 0 .8rem; }
.cekim-meta a { color: var(--vurgu); }
.cekim-aciklama { max-width: 68ch; margin: 0; }

/* ---- Masonry: JS yoksa CSS columns; JS varsa flex sütunlara dağıtılır ---- */
.masonry { columns: 3 300px; column-gap: 14px; }
.masonry.js { display: flex; gap: 14px; columns: auto; }
.m-sutun { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.foto-kart {
    margin: 0 0 14px;
    break-inside: avoid;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 4px;
    background: var(--zemin-2);
}
/* Kart içi bağlantı (JS'siz büyük görsel erişimi) blok akışını bozmasın */
.foto-kart .foto-link { display: block; }
.masonry.js .foto-kart { margin: 0; }
.foto-kart img {
    width: 100%;
    height: auto;
    transition: transform .5s ease, opacity .6s ease;
}
.foto-kart:hover img { transform: scale(1.03); }
.galeri-bos { color: var(--soluk); padding: 3rem 0; text-align: center; }

/* Filtre/arama sonrası sonuç sayısı */
.sonuc-sayisi { color: var(--soluk); font-size: .9rem; margin: -0.8rem 0 1.2rem; }

/* Arşiv sayfa gezintisi */
.sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin: 2rem 0 1rem;
}
.sayfa-bilgi { color: var(--soluk); font-size: .9rem; font-variant-numeric: tabular-nums; }

/* Kaydırdıkça zarif belirme */
.belirecek { opacity: 0; transform: translateY(14px); }
.belirdi { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion: reduce) {
    .belirecek, .belirdi { opacity: 1; transform: none; transition: none; }
    .cekim-kart, .cekim-kart:hover { transform: none; }
}

/* ---- Lightbox ---- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    /* Tam opak: %96'da arkadaki menü, başlık ve fotoğraflar sızıyor,
       görüntülenen fotoğrafın çevresi kirli görünüyordu */
    background: #080808;
    display: none;
    align-items: center;
    justify-content: center;
}
.lightbox.acik { display: flex; }
.lightbox figure {
    margin: 0;
    max-width: 94vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}
.lightbox img {
    max-width: 94vw;
    max-height: 82vh;
    object-fit: contain;
    box-shadow: 0 12px 60px var(--golge);
}
.lightbox figcaption { text-align: center; color: #ddd; padding: 0 1rem; }
.lightbox figcaption strong { font-weight: 500; letter-spacing: .03em; }
.lightbox figcaption span { color: #999; font-size: .88rem; }
#lbAciklama { display: block; }

/* Sayaç: "3 / 107" — başlığın soluna bitişik, soluk */
.lb-sayac {
    font-variant-numeric: tabular-nums; /* sayı genişliği sabit, titreme olmaz */
    letter-spacing: .06em;
    margin-right: .6rem;
}
.lb-sayac:not(:empty) + strong:empty { margin-right: 0; }

/* Klavye ipucu: ilk açılışta 2,5 sn görünür, sonra kaybolur */
.lb-ipucu {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .65);
    color: #ccc;
    font-size: .82rem;
    letter-spacing: .04em;
    padding: .45rem 1rem;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.lb-ipucu.gorunur { opacity: 1; }
.lb-kapat, .lb-onceki, .lb-sonraki {
    position: absolute;
    background: none;
    border: 0;
    color: rgba(255,255,255,.75);
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    padding: .6rem .9rem; /* ≥44px dokunma alanı */
    transition: color .2s;
    z-index: 101;
}
.lb-kapat:hover, .lb-onceki:hover, .lb-sonraki:hover { color: #fff; }
.lb-kapat { top: .6rem; right: .8rem; }

/* Telefonda video katmanında kapat, oynatıcının ses düğmesini örtmesin
   diye bir miktar sola kaydırılır (yine sağ üst bölgede kalır) */
@media (max-width: 700px) {
    .video-oynatici .lb-kapat { right: 3.4rem; }
}

/* İndirme tuşu: kapatmanın solunda, yanlış tıklamaya karşı aralıklı */
.lb-indir {
    position: absolute;
    top: 1rem;
    right: 4.4rem;
    display: grid;
    place-items: center;
    padding: .6rem;
    color: rgba(255,255,255,.75);
    transition: color .2s;
    z-index: 101;
}
.lb-indir:hover { color: #fff; }
.lb-onceki { left: .3rem; top: 50%; transform: translateY(-50%); }
.lb-sonraki { right: .3rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
    /* Mobilde ok yerine kaydırma kullanılır */
    .lb-onceki, .lb-sonraki { display: none; }
}

/* ---- Hakkımda ---- */
.hakkimda-icerik {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: clamp(1.4rem, 4vw, 3rem);
    align-items: start;
}
.hakkimda-foto img { border-radius: 6px; width: 100%; }
.hakkimda-metin p { margin: 0 0 1.1rem; max-width: 62ch; }
/* Fotoğraf yoksa metin dar foto sütununa sıkışmasın, tek sütun aksın */
.hakkimda-icerik.fotosuz { grid-template-columns: 1fr; }
/* Ana metinden "---" ile ayrılan not: sessiz, kenar çizgili küçük blok */
.hakkimda-not {
    margin: 2rem 0 1.4rem;
    padding: .9rem 1.1rem;
    border-left: 2px solid var(--vurgu);
    background: var(--zemin-2);
    border-radius: 0 10px 10px 0;
    max-width: 62ch;
}
.hakkimda-not p { margin: 0; color: var(--soluk); font-size: .92rem; }
.hakkimda-not p + p { margin-top: .8rem; }
@media (max-width: 760px) {
    .hakkimda-icerik { grid-template-columns: 1fr; }
    .hakkimda-foto { max-width: 420px; }
}

/* ---- 404 ---- */
.bulunamadi { text-align: center; padding-top: 12vh; }
.dev-404 { font-size: clamp(4rem, 18vw, 8rem); margin: 0; color: var(--cizgi); }
.bulunamadi h1 { margin: .2rem 0 1rem; }
.bulunamadi p { color: var(--soluk); margin-bottom: 2rem; }
.bulunamadi .galeri-dugme { border-color: var(--metin); color: var(--metin); }
.bulunamadi .galeri-dugme:hover { background: var(--metin); color: var(--zemin); }

/* ---- Alt bilgi ---- */
.site-alt {
    border-top: 1px solid var(--cizgi);
    text-align: center;
    padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
    color: var(--soluk);
    font-size: .85rem;
}
.ana-sayfa .site-alt { display: none; } /* ana sayfa tam ekran slayttır */
.sosyal-ikonlar { display: flex; justify-content: center; gap: 1.1rem; margin-bottom: .8rem; }
.hakkimda-metin .sosyal-ikonlar { justify-content: flex-start; margin-top: 1.6rem; }
.sosyal-ikonlar a {
    color: var(--soluk);
    transition: color .2s, transform .2s;
    display: inline-flex;
    padding: .5rem; /* dokunma hedefi */
}
.sosyal-ikonlar a:hover { color: var(--vurgu); transform: translateY(-2px); }

/* ---- Başa dön düğmesi ----
   Uzun çekim sayfalarında (264 fotoğrafta telefonda ~200 ekran boyu)
   parmakla yukarı kaydırmak yerine tek dokunuş. */
.yukari-cik {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 60;
    width: 44px; height: 44px; /* dokunma hedefi */
    display: grid;
    place-items: center;
    border: 1px solid var(--cizgi);
    border-radius: 50%;
    background: rgba(16, 16, 16, .82);
    color: var(--metin);
    cursor: pointer;
    /* Görünmezken tıklamayı da engelle */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.yukari-cik.gorunur { opacity: 1; visibility: visible; transform: none; }
.yukari-cik:hover { background: var(--zemin-2); }

/* ---- Daha fazla yükle ---- */
.daha-fazla-alan {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    margin: 2rem 0 1rem;
}
.daha-fazla-sayac { color: var(--soluk); font-size: .9rem; margin: 0; font-variant-numeric: tabular-nums; }
.daha-fazla {
    display: inline-block;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    padding: .75rem 1.8rem; /* rahat dokunma hedefi */
    color: var(--metin);
    background: var(--zemin-2);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.daha-fazla:hover { border-color: var(--vurgu); color: var(--vurgu); }
.daha-fazla.yukleniyor { opacity: .6; pointer-events: none; }

/* Çekim sayfası: bu geceye bağlı videolar fotoğrafların üstünde ayrı sırada */
.cekim-videolar { margin: 0 0 2.2rem; }
.cekim-videolar-baslik {
    font-size: 1.05rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--soluk);
    border-bottom: 1px solid var(--cizgi);
    padding-bottom: .45rem;
    margin-bottom: 1rem;
}

/* Çekim kartı ayrıntıları alt alta: kategori bir satır, sayılar bir satır
   ("· 2 video" tek başına alt satıra sarkmasın) */
.kart-detay span { display: block; line-height: 1.5; }