/* SERGİ & MODAL STİLLERİ */
.gallery-container {
     display: flex;
     flex-wrap: nowrap;
     height: 100vh; /* Genişlik JS ile verilecek */
}

.art-panel {
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* flex-shrink önemli */
} 

/* --- KAPSAYICI (Wrapper) --- */
.art-wrapper {
    position: relative;
    width: max-content;
    max-width: 80vw;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.art-wrapper:hover {
    transform: translateY(-10px); /* Üzerine gelince hafif yukarı kalksın */
}

/* --- GÖRSEL ALANI --- */
.image-container {
    position: relative;
    /* Genişlik ve yükseklik kısıtlamalarını kaldırıyoruz */
    width: auto; 
    overflow: hidden;
    background-color: transparent; /* Arka plan siyah olmasın, resim transparan olabilir */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* Resmin altına fazladan boşluk kalmaması için */
    line-height: 0;
}

.art-image {
    /* YENİ MANTIK: Yükseklik sabit, genişlik otomatik */
    height: 55vh; /* Ekran yüksekliğinin %55'i kadar olsun */
    width: auto;  /* En-boy oranını koruyarak genişliği ayarla */
    
    /* Crop (Kesme) yapmayı engelle */
    object-fit: contain; 
    
    display: block;
    transition: transform 0.5s ease, opacity 0.3s;
    opacity: 0.9;
}
/* --- KÜNYE KARTI (INFO BOX) --- */
.art-info-card {
    /* Kartın genişliği, üstündeki resimle aynı olsun */
    width: 100%; 
    box-sizing: border-box; /* Padding dahil hesapla */
    
    background-color: #fff;
    color: #000;
    padding: 25px;
    padding-left: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    border-bottom: 2px solid #ddd;
    text-align: left;
    position: relative;

    /* Resim satır yüksekliğinden etkilenmesin diye */
    line-height: normal;
}

/* Kartın soluna "Müze Şeridi" gibi dekoratif bir çizgi */
.art-info-card::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 25px;
    bottom: 25px;
    width: 3px;
    background-color: #000; /* Tema rengi */
}
/* Padding'i ona göre ayarlayalım */
.art-info-card { padding-left: 20px; }


/* Tipografi */
.art-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 5px 0;
    text-transform: capitalize;
    letter-spacing: 1px;

    /* Beyaz kart üstünde okunabilirlik için KOYU BRONZ/SİYAH tercih edelim */
    color: #111 !important; 
    /* Eğer illa altın olsun derseniz daha koyu bir ton: color: #997b28 !important; */
}

.art-artist {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    color: #666; /* Gri kalsın, hiyerarşi bozulmasın */
    font-style: italic;
}

.art-meta {
    display: flex;
    justify-content: space-between; /* Açıklama solda, fiyat sağda */
    align-items: flex-end;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.art-desc {
    font-size: 0.8rem;
    color: #444;
    margin: 0;
    max-width: 65%;
    line-height: 1.4;
}

.art-price {
    font-family: 'Helvetica Neue', sans-serif; /* Rakamlar modern fontta daha iyi okunur */
    color: #D4AF37; /* Fiyatı altın yapalım, şık durur */
}

/* --- DİĞER DETAYLAR --- */
.sold-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #b91c1c;
    color: white;
    padding: 5px 12px;
    font-weight: bold;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

/* Parallax Hizalamaları (Resim+Kart Birlikte Oynar) */
.panel-up .art-wrapper { margin-top: -60px; }
.panel-down .art-wrapper { margin-top: 60px; }
.panel-mid .art-wrapper { margin-top: 0; }

/* Mobil Uyum */
@media (max-width: 768px) {
    /* Mobilde çok geniş resimler ekranı taşırmasın */
    .art-wrapper {
        width: auto;
        max-width: 85vw; /* Ekranın %85'ini geçmesin */
    }
    
    .art-image {
        /* Mobilde yükseklik biraz daha az olabilir */
        height: auto; 
        max-height: 50vh; 
        max-width: 100%; /* Kapsayıcıdan taşmasın */
    }
    .art-info-card { padding: 20px; }
    .art-title { font-size: 1.2rem; }
}

/* --- MOBİL UYUMLULUK (NATIVE HORIZONTAL SCROLL) --- */
@media (max-width: 768px) {
    /* 1. Konteyneri serbest bırak */
    .gallery-container {
        width: auto !important; /* JS'in verdiği genişliği iptal et */
        height: 100vh;
        overflow-x: auto; /* Yatayda taşmaya (scroll'a) izin ver */
        overflow-y: hidden; /* Dikey scrollu kapat */
        scroll-snap-type: x mandatory; /* Mobilde parmakla kaydırınca "tak" diye otursun */
        -webkit-overflow-scrolling: touch; /* iOS için yumuşak kaydırma */
        
        /* Flex özellikleri kalsın ama başlangıç hizalaması önemli */
        justify-content: flex-start; 
    }

    /* 2. Panellerin davranışı */
    .art-panel {
        width: 100vw; /* Tam ekran genişlik */
        flex-shrink: 0; /* Küçülmesin */
        scroll-snap-align: start; /* Ekrana tam otursun */
    }

    /* 3. Parallax efektini mobilde sıfırla (Performans ve düzen için) */
    .panel-up .art-wrapper,
    .panel-down .art-wrapper,
    .panel-mid .art-wrapper {
        margin-top: 0 !important; /* Hepsini hizaya sok */
    }
    
    /* Mobilde kart genişliğini biraz artıralım ki rahat görünsün */
    .art-wrapper {
        width: 85vw;
    }
    
    /* Scroll çubuğunu gizle (Estetik için) */
    .gallery-container::-webkit-scrollbar {
        display: none;
    }
}

/* --- SCROLL HINT GENEL --- */
.scroll-hint-wrapper {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.scroll-hint-wrapper.hidden { opacity: 0; visibility: hidden; }

.hint-text {
    font-family: var(--body-font);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
}

/* =========================================
   1. MASAÜSTÜ (MOUSE) TASARIMI
   ========================================= */
.mouse-icon {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    position: relative;
    display: block; /* Varsayılan olarak göster */
}

.wheel {
    width: 4px;
    height: 6px;
    background-color: #fff;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: mouseScroll 1.5s infinite;
}

@keyframes mouseScroll {
    0% { opacity: 1; top: 6px; }
    100% { opacity: 0; top: 20px; }
}

/* =========================================
   2. MOBİL (EL/PARMAK) TASARIMI
   ========================================= */
.hand-icon {
    display: none; /* Varsayılan olarak GİZLE (Masaüstünde görünmesin) */
    width: 40px;
    height: 40px;
    position: relative;
}

/* Parmak Şekli (Basit bir daire/oval) */
.finger {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: swipeAnim 2s infinite ease-in-out;
}

/* Parmak Dokunma Efekti (Halka) */
.finger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.8;
}

/* Yatay Kaydırma Animasyonu (Swipe) */
@keyframes swipeAnim {
    0% { transform: translate(-50%, -50%) translateX(10px); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateX(-20px); opacity: 0; }
    /* Not: Sağdan sola doğru kaydırır (İçeriği çekme hareketi) */
}


/* =========================================
   MEDYA SORGUSU (DEĞİŞİM ANI)
   ========================================= */
@media (max-width: 768px) {
    /* Mobilde Mouse'u gizle */
    .mouse-icon {
        display: none;
    }

    /* Mobilde Eli göster */
    .hand-icon {
        display: block;
    }
    
    /* Metni de mobilde biraz küçültelim */
    .hint-text {
        font-size: 0.7rem;
    }
}