/* --- TEMEL AYARLAR --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff;
    color: #333;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- GENİŞ EKRANDA ORTALAMA (ANA KAPSAYICI) --- */
.global-container {
    width: 100%;
    max-width: 1920px; /* İçeriğin sığması için doğru max genişlik */
    margin: 0 auto;
    box-sizing: border-box;
}

/* --- 1. NAVBAR --- */
.navbar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 60px auto 20px auto;
    padding: 0 50px;
    box-sizing: border-box;
}

.nav-links {
    margin-right: 30px;
}

.nav-links ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    color: #555;
    font-size: 14px;
    font-weight: 300;
    margin: 0 15px;
    padding-bottom: 2px;
}

/* Navbar linklerinin üzerine gelince rengini siyah yap */
.nav-links li a:hover {
    color: #000;
}

.nav-links li a.active {
    color: #000;
    border-bottom: 1px solid #000;
}

.logo {
    display: flex;
    align-items: center;
}
.logo img {
    margin-left: -12px;
    height: 39px;
    margin-right: 10px;
}
.logo span {
    font-weight: 300;
    font-size: 14px;
}

/* --- 2. BAŞLIKLAR (YAZILAR) --- */
.content-wrapper {
    width: 100%;
    margin: 40px 0 0 0;
    text-align: left;
    padding: 0 50px;
    box-sizing: border-box;
}

.headline-section h1 {
    font-size: 48px;
    font-weight: 300;
    margin: 0;
    color: #555;
    line-height: 1.1;
}

.headline-section p {
    font-size: 20px;
    font-weight: 300;
    color: #888;
    margin-top: 2px;
}

/* --- 3. YATAY SCROLL BÖLÜMÜ (KARTLAR) --- */
.portfolio-scroll-section {
    width: 100%;
    margin-top: 0px;
    padding: 0;
}

.scroll-wrapper {
    /* DEĞİŞİKLİK: 'hidden' değil, 'auto' olmalı. Tarayıcı karar versin. */
    overflow-x: auto; 
    overflow-y: hidden;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-sizing: border-box;
    
    /* HİZALAMA VE SİMETRİK BOŞLUK: */
    padding-left: 0px;  /* Boşluklar artık project-container içinde */
    padding-right: 0px;
}
.scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.scroll-wrapper.active {
    cursor: grabbing;
    user-select: none;
}

.project-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: max-content;
    gap: 15px;
    padding: 20px 0;
    
    /* BOŞLUKLARIN DOĞRU YERİ BURASI: */
    padding-left: 50px;
    padding-right: 50px;
}

/* --- KART STİLLERİ (TEMİZLENMİŞ VE DÜZELTİLMİŞ) --- */

.project-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Öğeleri yukarıya hizala */
    align-items: flex-start; /* Öğeleri yatayda ortala */
    
    width: 350px;
    height: 650px;
    padding: 30px; /* İç boşluk */
    background-color: #f7f7f7;
    
    flex-shrink: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

/* Logoyu saran div'i stillendir */
.project-logo-wrapper {
    width: 100%;
    max-height: 80px; /* Logonun max yüksekliği */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    margin-top: 9px;
}

/* Logonun kendisi (div'in içinde) */
.project-logo-wrapper img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Açıklama metni */
.project-card p {
    font-size: 16px;
    color: #959595;
    margin-top: 10px; /* Logo ile arasına boşluk */
    text-align: left;
    flex-shrink: 0;
    font-weight: 300;
}

/* (Daha sonra bir ana görsel eklersen, 
   o da buraya flex-grow: 1 ile gelip kalan boşluğu doldurur) */

/* --- 4. SCROLL GÖSTERGESİ (BOX) --- */
.scroll-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
    margin: 0 auto;
}

.scroll-track {
    width: 50px;
    height: 9px;
    background-color: #f0f0f0;
    border-radius: 4px;
    position: relative;
}

.scroll-thumb {
    width: 50px;
    height: 100%;
    background-color: #888;
    border-radius: 4px;
    position: absolute;
    left: 0;
}

/* Ana proje görselleri için stiller */
.card-main-image {
    /* 1. Görseli sağa hizala (soldaki hizalamayı geçersiz kılar) */
    align-self: flex-end;
    max-width: 100%;    
    /* 3. Boyutunu ayarla (artık %100 değil) */
    width: auto;
    height: auto;
    object-fit: contain; /* Boyutu koru, sığdır */
    margin: -30px;
    /* 4. Diğer stiller */
    min-height: 0;
}

/* Sadece Purpin kartındaki ana görsel için özel kurallar */
#purpin .card-main-image {
    
    /* 1. Diğer kartlardaki 'auto' kuralını geçersiz kıl. 
       Metinden sonra 20px boşluk bırak (auto yerine sabit değer). */
    margin-top: -50px; 
    
    /* 2. Diğer kartlardaki 500px'lik sınırı kaldır 
       veya daha fazla büyümesine izin ver. */
    max-height: 600px; /* 500px idi, 550px'e çıkardık */

    /* Geri kalan 'align-self: flex-end;' (sağa hizala) gibi kurallar 
       zaten ana .card-main-image kuralından miras alınır ve çalışır.
    */
}

#kulup-card-logo {
    margin-top: -30px;}




    /* --- 📱 MOBİL EKRAN AYARLARI --- */
@media (max-width: 768px) {

    /* --- 1. NAVBAR KÜÇÜLTME --- */
    .navbar {
        margin-top: 30px; /* Üst boşluğu azalt */
        padding: 0 20px;  /* Kenar boşluklarını azalt */
    }
    
    .logo img {
        height: 32px; /* Logoyu küçült (39px idi) */
    }
    
    .nav-links li a {
        font-size: 13px; /* Yazıyı küçült (14px idi) */
        margin: 0 10px;  /* Linkler arası boşluğu azalt */
    }

    /* --- 2. BAŞLIKLARI KÜÇÜLTME --- */
    .content-wrapper {
        padding: 0 20px; /* Kenar boşluklarını azalt */
        margin-top: 40px;
    }
    
    .headline-section h1 {
        font-size: 32px; /* Ana başlığı küçült (48px idi) */
    }

    .headline-section p {
        font-size: 16px; /* Alt başlığı küçült (20px idi) */
    }

    /* --- 3. KARTLARI KÜÇÜLTME --- */
    
    /* Kaydırma alanının kenar boşluklarını azalt */
    .project-container {
        padding-left: 20px;
        padding-right: 20px;
        gap: 15px; /* Kart arası boşluğu azalt (15px idi) */
    }

    /* Kartların kendisini küçült */
    .project-card {
        width: 250px;    /* Kart genişliğini azalt (350px idi) */
        height: 550px;   /* Kart yüksekliğini azalt (650px idi) */
        padding: 30px;   /* İç boşluğu azalt (30px idi) */
    }
    
    /* Kart içindeki logo */
    .project-logo-wrapper {
        max-height: 70px; /* Logo alanını küçült (80px idi) */
    }
    
    /* Kart içindeki metin */
    .project-card p {
        font-size: 16px; /* Metni küçült (14px idi) */
    }
    
    /* Kart içindeki ana görsel */
    .card-main-image {
        margin-top: 0px; /* Boşluğu azalt (20px idi) */
    }
    
    /* Purpin kartı için özel kural (mobil) */
    #purpin .card-main-image {
        max-height: 420px; /* Mobil için de ayarla (550px idi) */
    }
    
    /* --- 4. SCROLL GÖSTERGESİ (BOX) --- */
    .scroll-track {
        height: 9px; /* Kalınlık (9px idi) */
    }
}

/* --- 5. YENİ MASONRY GALERİ STİLLERİ (Hizalama Düzeltildi) --- */

/* Galerinin ana kapsayıcısı (Artık %100 genişlikte ve hizalı) */
.other-works-section {
    width: 100%;
    margin-top: 20px; /* Sadece üst boşluk */
    
    /* HİZALAMA İÇİN: content-wrapper ile aynı padding'i ver */
    padding: 0 50px;
    box-sizing: border-box;
}

.work-grid {
margin-left: 20%;
}

/* Isotope yüklenirken ızgarayı geçici olarak gizle (zıplamayı önler) */
.work-grid.is-loading {
    opacity: 0;
}

/* Izgara öğesi (her bir resim kutusu) */
.work-grid-item {
    width: 75%; 
    box-sizing: border-box;
    margin-bottom: 0.5%; /* Dikey boşluk */
}

/* Izgara öğesindeki resim */
.work-grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hover efekti */
.hovercalismalar {
    transform: scale(1);
    transition: all 0.3s ease-in-out;
}
.hovercalismalar:hover {
    transform: scale(1.03);
    cursor: pointer;
}

/* Fancybox (popup) için özel ayarlar */
.fancybox-bg {
    background-color: #000000df !important;
}

/* --- 6. GALERİ MOBİL UYUMLULUK (Hizalama Düzeltildi) --- */
@media (max-width: 768px) {
    
    .other-works-section {
        /* HİZALAMA İÇİN: Mobildeki content-wrapper ile aynı (20px) */
        padding: 0 10px;
        margin-top: 40px;        
    }
    
    /* Mobil (2 sütunlu düzen) */
.work-grid-item {
        width: 115%;
        box-sizing: border-box; 
        margin-left: -19.9%;
        
        /* DÜZELTME: 
           padding: 8px; (her yön) yerine,
           sadece yatay (sağ/sol) boşluk ver.
        */
        padding: 0 4px; /* Üst/Alt: 0, Sağ/Sol: 4px */

        /* Dikey boşluğu (satırlar arası) buradan ayarla */
        margin-bottom: 5px; /* 5px idi, 8px yaptık */
    }
}


/* --- 7. FİLTRE BUTON STİLLERİ --- */
.filter-controls {
    /* Üstteki content-wrapper ile hizalı olması için */
    padding: 0 50px; 
    margin-bottom: 20px;
    box-sizing: border-box;
    margin-left: 6%
}

.filter-title {
    font-size: 29px;
    font-weight: 300;
    color: #555; /* Görseldeki gibi soluk gri */
    margin: 0;
    text-transform: lowercase; /* küçük harf */
}

.filter-button-group {
    margin-top: 0px;
}

.filter-btn {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #888;
    background-color: transparent;
    border: none;
    
    padding-top: 5px;
    padding-bottom: 0px; 
    
    /* YENİ EKLENEN SATIRLAR (Yatay boşluğu sıfırlar) */
    padding-left: 0;
    padding-right: 0;
    
    margin-right: 20px; /* Butonlar arası boşluk buradan sağlanır */
    cursor: pointer;
    text-transform: lowercase;
    transition: color 0.3s;
}

.filter-btn:hover {
    color: #000;
}

/* Aktif olan butonun stili */
.filter-btn.is-checked {
border-bottom: 1px solid #000;
}




/* --- 9. FOOTER STİLLERİ --- */
.site-footer {
    width: 100%;
    text-align: center;
    padding: 40px 0; /* Üst/alt boşluk */
    margin-top: auto; /* Galeri ile arasına boşluk koyar */
}

.site-footer p {
    margin: 0;
    font-size: 13px; /* Ufak bir yazı boyutu */
    font-weight: 300;
    color: #999; /* Soluk bir renk */
}

@media (max-width: 768px) {
    .site-footer {
         margin-top: -20px; /* Galeri ile arasına boşluk koyar */
    }
}

@media (max-width: 768px) {
    .site-footer p {
        font-size: 12px; /* Mobilde biraz daha küçük */
    }
}




/* --- 10. FOOTER'I EN ALTA SABİTLEME KURALI (Düzeltilmiş) --- */

/* 1. "page-no-scroll" sınıfına sahip body'nin %100 yükseklikte olmasını sağla */
body.page-no-scroll {
    height: 100vh;
    display: flex; /* Body'yi flex container yap */
    flex-direction: column;
}

/* 2. .global-container'ın da esnemesini sağla */
body.page-no-scroll .global-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Body içinde kalan tüm alanı doldur */
}

/* 3. Footer'ı en alta iten ana kural */
body.page-no-scroll .site-footer {
    /* Footer'dan önceki tüm içeriğin (navbar, content-wrapper) 
       kalan tüm boşluğu almasını sağlar. */
    margin-top: auto; 
    
    /* Zaten var olan stiller (bozulmasın diye tekrar ekliyoruz) */
    width: 100%;
    text-align: center;

}

@media (max-width: 768px) {
    .mobil{
        display:block;
        }

    .web{
        display: none;
    }  
}

@media (min-width: 768px) {
    .mobil{
        display:none;
        }

    .web{
        display: block;
    }  
}