/*
 * Endüstriyel mutfak landing popup'ı.
 * Overlay / kapatma butonu / açılış animasyonu Fancybox'tan geliyor,
 * burada sadece kartın kendi görünümü var.
 */

/* DİKKAT: Fancybox kapatma butonunu content kutusunun İÇİNE ekliyor ama
   `top:-40px` ile kutunun üstüne taşırıyor:
       .fancybox__content > .carousel__button.is-close { top:-40px; right:0 }
   Bu yüzden bu elemana `overflow:hidden` VERİLMEMELİ, yoksa kapatma butonu
   kırpılıp görünmez oluyor. Köşe yuvarlatma bir alttaki .lp-promo-visual'da. */
#lpPromo.fancybox__content {
    width: 560px;
    max-width: 88vw;
    padding: 0;
    background: transparent;
    cursor: auto;
}

/* Kartın tamamı landing'e tıklanabilir. Kırpma ve yuvarlatma burada yapılıyor. */
#lpPromo .lp-promo-visual {
    display: block;
    position: relative;
    width: 100%;
    line-height: 0;
    text-decoration: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

/* Görsel 3:2 oranında; genişliği değiştirirsen yükseklik 2/3'ü kadar olur. */
#lpPromo .lp-promo-visual img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s ease;
}

#lpPromo .lp-promo-visual:hover img {
    transform: scale(1.04);
}

/* Yazı fotoğrafın üstünde duruyor; okunabilirlik için alttan koyu geçiş. */
.lp-promo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 70px 28px 28px;
    background: linear-gradient(to bottom, rgba(10, 22, 40, 0) 0%, rgba(10, 22, 40, .8) 55%, rgba(10, 22, 40, .93) 100%);
    line-height: normal;
    text-align: center;
}

.lp-promo-title {
    display: block;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

@media (max-width: 767px) {
    .lp-promo-caption {
        padding: 50px 18px 20px;
    }

    .lp-promo-title {
        font-size: 19px;
    }
}