/* --- OFFLINE KULLANIM İÇİN --- */
html, body {
    font-family: 'Outfit', sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* --- KESİN SCROLL KİLİDİ --- */
html.scroll-locked, body.scroll-locked {
    overflow: hidden !important;
    height: 100% !important; 
    position: relative; 
    touch-action: none; 
}

/* --- INTRO ÖZEL KİLİTLEME --- */
#landing-overlay {
    touch-action: none; /* Dokunmatik kaydırmayı tamamen iptal et */
    overscroll-behavior: none; /* Lastik etkisini iptal et */
    width: 100%;
    height: 100%;
}

/* --- YENİ INTRO ANİMASYONU --- */
@keyframes fadeGlowUp {
    0% { opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(5px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.animate-intro-content > * {
    opacity: 0; 
    animation: fadeGlowUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-intro-content > *:nth-child(1) { animation-delay: 0.1s; }
.animate-intro-content > *:nth-child(2) { animation-delay: 0.3s; }
.animate-intro-content > *:nth-child(3) { animation-delay: 0.5s; }
.animate-intro-content > *:nth-child(4) { animation-delay: 0.8s; }

@keyframes bgFocus {
    0% { opacity: 0; transform: scale(1.15); filter: blur(15px); }
    100% { opacity: 1; transform: scale(1); filter: blur(0px); }
}

.animate-bg-intro {
    animation: bgFocus 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* --- BUTON EFEKTİ --- */
.intro-btn {
    position: relative;
    background: transparent;
    overflow: hidden; 
    transition: all 0.4s ease;
    z-index: 10;
    isolation: isolate; 
}

.intro-btn::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #eab308; 
    transform: scaleX(0); 
    transform-origin: left; 
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1; 
}

.intro-btn:hover::before { transform: scaleX(1); }
.intro-btn:hover {
    color: #111827 !important; 
    border-color: #eab308;
    box-shadow: 0 0 20px rgba(234, 179, 8, 0.4); 
}

.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* --- KARTLAR --- */
.category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.category-img-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}
.category-img-wrapper img { transition: transform 0.6s ease; }
.category-card:hover .category-img-wrapper img { transform: scale(1.05); }

/* --- MODAL & OVERLAY GÜNCELLEMESİ --- */
#product-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 4999;
    opacity: 0;
    pointer-events: none;
    visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0s linear 0.3s; 
}
#product-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s; 
}

#product-modal {
    position: fixed;
    z-index: 5000;
    background: white;
    display: flex;
    flex-direction: column;
    top: 0; left: 0; 
    width: 100%; 
    height: 100dvh; 
    border-radius: 0;
    overflow: hidden;
    
    transform: translateY(100%);
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.4s;
}

#product-modal.active {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

@media (min-width: 768px) {
    #product-modal {
        top: 50%; left: 50%; width: 950px; height: 650px; 
        max-height: 90vh;
        transform: translate(-50%, -40%) scale(0.95);
        border-radius: 24px;
        opacity: 0; 
        visibility: hidden;
        flex-direction: row;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0s linear 0.4s;
    }
    #product-modal.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1; 
        visibility: visible;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0s linear 0s;
    }
    .modal-image-section { width: 55%; min-width: 55%; height: 100% !important; }
    .modal-content-section { width: 45%; min-width: 45%; height: 100%; padding: 2.5rem !important; }
}

/* Swiper */
.swiper { width: 100%; height: 100%; background: #f3f4f6; }
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

.mySwiperThumbs {
    position: absolute; bottom: 10px; left: 0; right: 0; z-index: 30;
    padding: 5px 0; height: 60px !important; background: transparent;
}
.mySwiperThumbs .swiper-slide {
    width: 20%; height: 100%; opacity: 0.6; cursor: pointer;
    border-radius: 8px; overflow: hidden; border: 2px solid transparent;
    transition: all 0.2s; background: #fff;
}
.mySwiperThumbs .swiper-slide-thumb-active {
    opacity: 1; border-color: #eab308; transform: scale(1.05);
}
.thumb-gradient-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 80px;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    z-index: 25; pointer-events: none;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.nav-item.active { color: #ca8a04; }
.qr-btn-shadow { box-shadow: 0 -4px 20px rgba(0,0,0,0.2); }

/* Cookie */
#cookie-banner {
    transform: translateY(150%); opacity: 0; pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
}
#cookie-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.5s ease forwards; }