.animate-fade-in {
    animation: fadeIn 1s ease-in-out forwards;
}

.animate-slide-in {
    animation: slideIn 1s ease-in-out forwards;
}

.animate-zoom-in {
    animation: zoomIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobil Uygulama Slider Stilleri */
.phone-container {
    position: relative;
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .phone-container {
        max-width: 200px;
    }
}

@media (max-width: 640px) {
    .phone-container {
        max-width: 180px;
    }
}

.phone-frame {
    position: relative;
    z-index: 10;
    width: 100%;
    height: auto;
}

 
.screen-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.app-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* İlk görseli varsayılan olarak göster */
.app-screen:first-child {
    opacity: 1;
}

.app-screen.active {
    opacity: 1;
}

/* App download butonları */
.app-download-btn {
    display: inline-block;
    transition: all 0.3s ease;
    touch-action: manipulation;
}

.app-download-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Mobil dokunma optimizasyonu */
@media (hover: none) {
    .app-download-btn:hover {
        transform: none;
        filter: none;
    }
    
    .app-download-btn:active {
        transform: scale(0.98);
        filter: brightness(0.95);
    }
}
 
 

/* 3D Tilted Phone Slider */
.tilted-phone-slider {
    position: relative; 
    perspective: 1000px;
    transform-style: preserve-3d;
}

.tilted-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: all 0.8s ease-in-out;
    transform: translateY(-100%) scale(0.9);
}

.tilted-screen.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 3D carousel effect */
.tilted-screen.prev {
    transform: translateY(100%) scale(0.8);
    opacity: 0;
}

.tilted-screen.next {
    transform: translateY(-100%) scale(0.8);
    opacity: 0;
}

/* İlk görsel başlangıçta gösterilsin */
.tilted-screen:first-child {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hover effect */
.tilted-phone-slider:hover .tilted-screen.active {
    opacity: 1;
}

/* Mobil dokunma optimizasyonu */
@media (hover: none) {
    .tilted-screen {
        transition: opacity 1.5s ease-in-out;
    }
}

 

/* hs-carousel-slide-in overflow düzeltmesi */
.hs-carousel-slide-in {
    overflow: hidden;
    height: 100%;
}