/* Genel Ayarlar */
body, html {
    margin: 0;
    padding: 0;
    background-color: #000000;
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
}

#snowCanvas {
    position: fixed;
    top: 0; left: 0;
    z-index: 5;
    pointer-events: none;
}

/* --- MASAÜSTÜ MODU (Geniş Ekran) --- */
@media (min-width: 769px) {
    body {
        overflow: hidden; /* Masaüstünde kaydırma çubuğunu gizle */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .catalog-container {
        position: relative;
        width: 90%;
        max-width: 500px;
        aspect-ratio: 4 / 5;
        z-index: 10;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }

    .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
        transform: scale(0.95);
    }

    .slide.active {
        opacity: 1;
        transform: scale(1);
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    /* Navigasyon (Sadece Masaüstünde Görünür) */
    button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 255, 0, 0.2);
        color: white;
        border: none;
        padding: 15px;
        cursor: pointer;
        z-index: 100;
        border-radius: 50%;
        transition: 0.3s;
    }
    .prev { left: -60px; }
    .next { right: -60px; }
    button:hover { background: rgba(0, 255, 0, 0.5); }
}

/* --- MOBİL MOD (Dikey Kaydırma) --- */
/* --- MOBİL MOD (Ferah Dikey Akış) --- */
@media (max-width: 768px) {
    body {
        overflow-y: auto; 
        scroll-snap-type: y proximity;
        background-color: #0d0d0d; /* Sayfa arkası derinlik için çok koyu gri */
    }

    .catalog-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 30px 0; /* Üst ve alttan geniş boşluk */
        gap: 40px; /* Sayfalar arasındaki boşluğu belirgin şekilde açtık */
    }

    .slide {
        position: relative;
        width: 88%; /* Sayfaları biraz daha daraltarak ekranda daha zarif durmasını sağladık */
        margin: 0 auto;
        height: auto;
        opacity: 1;
        transform: scale(1);
        scroll-snap-align: center;
        
        /* Daha yumuşak ve yaygın bir gölge */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); 
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.3s ease;
    }

    .slide img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Mobilde kontrolleri gizle */
    button, .dots {
        display: none !important;
    }
}

/* Loader (Değişmedi) */
#loader {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1);
}
.loader-logo-img { width: 250px; }
.loader-status { width: 200px; height: 2px; background: rgba(255,255,255,0.1); position: relative; }
.loading-line { position: absolute; left: 0; height: 100%; background: #d4af37; transition: width 0.4s; }