/* =========================================
   ANA SAYFA ÖZEL CSS (home.css)
   ========================================= */

/* Masaüstü Temel Yapı */
.main-hero-sketch { position: relative; width: 100%; height: 40vh; overflow: hidden; }
.main-hero-sketch img { width: 100%; height: 100%; object-fit: cover; }

.sketch-scroll-indicator {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    color: #000; font-size: 24px; animation: bounce 2s infinite; z-index: 5;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
    40% {transform: translateX(-50%) translateY(-10px);}
    60% {transform: translateX(-50%) translateY(-5px);}
}

.hero-slider-area { 
    position: relative; 
    min-height: 600px; 
    background: #fff; 
    overflow: hidden; 
}

.slider-progress-bar {
    position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: rgba(0,0,0,0.1); z-index: 50;
}

.progress-fill {
    height: 100%; width: 0; background: #b71c1c;
    transition: width 0.1s linear;
}

.slide { 
    display: none; 
    width: 100%; 
    height: 100%; 
    align-items: center; 
}
.slide.active { display: flex; }

.slide.active .slide-desc, 
.slide.active .slide-logo, 
.slide.active .slide-btn,
.slide.active .slide-image-desktop,
.slide.active .slide-image-mobile {
    animation: slideFadeUp 0.8s ease forwards;
}

@keyframes slideFadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-content-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.slide-content { 
    width: 50%; 
    padding: 0 5%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    z-index: 5; 
}

.slide-title { font-size: 24px; font-family: 'Inter', sans-serif; line-height: 1.2; margin-bottom: 30px; text-transform: uppercase; font-weight: 700; }

.slide-logo {
    height: 100px !important;
    width: 280px !important;
    object-fit: contain !important;
    margin: 0 auto 30px auto !important;
    display: block;
    max-width: 100%;
}

/* Beypalas, Watermall ve Greenpalas logoları için özel boyutlandırma */
.slide-logo[src*="Beypalas"],
.slide-logo[src*="Watermall"],
.slide-logo[src*="Greenpalas"] {
    height: 110px !important;
    width: 260px !important;
}

.slide-desc { font-size: 16px; color: #666; max-width: 450px; margin-bottom: 40px; }
.slide-btn { padding: 15px 40px; border: 1px solid #000; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; transition: 0.3s; width: fit-content; text-decoration: none; color: #000; }
.slide-btn:hover { background: #000; color: #fff; }

.slide-image-desktop { 
    position: relative; 
    width: 50%; 
    height: 100%; 
    z-index: 1; 
    opacity: 1; 
}
.slide-image-desktop img { 
    width: 100%; 
    height: 500px; 
    object-fit: cover; 
    border-radius: 8px;
}
.slide-image-mobile { display: none; }

.slider-controls { position: absolute; bottom: 40px; left: 0; width: 100%; display: flex; justify-content: center; gap: 30px; z-index: 20; }
.slider-arrows button { background: transparent; border: 1px solid #ddd; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: 0.3s; }
.slider-arrows button:hover { background: #000; color: #fff; border-color: #000; }

/* 3. 3'LÜ CAROUSEL (DEVASA TAM EKRAN MODU) */
.showcase-section {
    position: relative;
    padding: 80px 0;
    background: #fcfcfc;
    overflow: hidden;
    border-top: 1px solid #eee;
}

.showcase-section .container {
    max-width: 90% !important; 
    padding: 0 30px;
}

.showcase-header { text-align: center; margin-bottom: 40px; }
.showcase-header h2 { font-size: 24px; font-family: 'Inter', sans-serif; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; }
.showcase-header p { color: #999; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }

/* Filtre Butonları */
.showcase-filters { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }
.filter-btn { background: none; border: none; font-size: 13px; font-weight: 600; color: #999; cursor: pointer; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: 0.3s; letter-spacing: 1px; }
.filter-btn.active, .filter-btn:hover { color: #000; border-color: #000; }

.carousel-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 60px;
}

.carousel-track-container { overflow: hidden; width: 100%; }

.carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    gap: 30px;
    padding: 10px 0;
}

.carousel-slide {
    min-width: calc(33.333% - 10px); 
    position: relative;
    cursor: pointer;
}
.showcase-card {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* 1. KÖK ÇÖZÜM: Arkaplan resmi kuralını sınırlandırıyoruz ( Sadece ">" işareti eklendi ) */
/* Bu sayede sadece kartın doğrudan içindeki resim etkilenir, hover içindeki logo güvende kalır. */
.showcase-card > img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.8s ease; 
}

.showcase-card:hover > img { 
    transform: scale(1.1); 
}

.showcase-card:hover .showcase-overlay { 
    opacity: 1; 
}

/* 2. OVERLAY KAPSAYICI */
.showcase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
}

/* 3. LOGO KURALI: Özgüllüğü artırıldı ve esnek sınırlar konuldu */
.showcase-card .showcase-overlay .hover-logo {
    width: auto;
    height: auto;
    max-width: 70%;  /* Genişlik kartın %80'ini geçemez */
    max-height: 70%; /* Yükseklik kartın %80'ini geçemez */
    object-fit: contain;
    transition: transform 0.3s ease;
    margin-left: -22px;
}

.showcase-card:hover .hover-logo {
    transform: scale(1.05);
}
.showcase-title { font-size: 22px; font-family: 'Inter', sans-serif; margin-bottom: 10px; font-weight: 700; }
.carousel-btn { 
    position: absolute; top: 50%; transform: translateY(-50%); 
    background: #fff; border: 1px solid #eee; 
    width: 50px; height: 50px; border-radius: 50%; 
    cursor: pointer; z-index: 10; transition: 0.3s; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}
.carousel-btn:hover { background: #000; color: #fff; border-color: #000; }
.carousel-btn.prev { left: 0; }
.carousel-btn.next { right: 0; }

/* MOBİL & TABLET */
@media (max-width: 1400px) {
    .showcase-card { height: 380px; }
}

@media (max-width: 1024px) {
    .carousel-slide { min-width: calc(50% - 10px); }
    .slide-title { font-size: 24px; }
}

@media (max-width: 768px) {
    .slide-content-wrapper { flex-direction: column; }
    .main-hero-sketch { height: 25vh; }
    .hero-slider-area { min-height: auto; padding: 20px 0; border-top: 1px solid #f0f0f0; }
    
    .slide.active { 
        flex-direction: column; 
        position: relative;
    }

    .slide-content { 
        width: 100%; 
        padding: 20px; 
        align-items: center; 
        text-align: center;
    }

    .slide-desc { order: 1; margin-bottom: 20px; font-size: 16px; width: 100%; max-width: 100%; }
    
    .slide-image-mobile { 
        display: block; 
        order: 2; 
        width: 100%; 
        height: 250px; 
        margin-bottom: 20px; 
    }
    .slide-image-mobile img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
    
    .slide-logo, .slide-title { 
        order: 3; 
        height: 60px !important;
        width: 180px !important;
        margin: 0 auto 20px !important; 
    }

    .slide-logo[src*="Beypalas"],
    .slide-logo[src*="Watermall"],
    .slide-logo[src*="Greenpalas"] {
        height: 80px !important;
        width: 200px !important;
    }
    
    .slide-btn { 
        order: 4; 
        width: 100%; 
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .slide-image-desktop { display: none; }

    .slider-controls { 
        position: relative; 
        order: 5; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        justify-content: center; 
        margin-top: 20px; 
        padding-bottom: 20px;
    }

    .showcase-section .container { max-width: 100% !important; padding: 0; }
    .carousel-wrapper { padding: 0 50px; }
    .carousel-slide { min-width: 100%; margin-right: 0; scroll-snap-align: center; } 
    .carousel-track-container { overflow: visible; }
    .carousel-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; gap: 0; scrollbar-width: none; }
    .carousel-track::-webkit-scrollbar { display: none; }
    .carousel-btn { display: flex; width: 35px; height: 35px; background: rgba(255,255,255,0.95); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .carousel-btn.prev { left: 5px; }
    .carousel-btn.next { right: 5px; }
    .showcase-card { height: 260px; }
}