/* --- GENEL SLİDER YAPISI --- */
.slider-container {
position: relative;
width: 100%;
height: 100vh;
background-color: #333;
overflow: hidden;
}.slider-container .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
display: flex;
align-items: center;
}/* Sadece Arka Plan Resmi */
.slider-container .slide img.bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}/* Arka Plan Renk Geçişi (Gradient) */
.slider-container .slide::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(21, 108, 39, 0.95) 0%,
rgba(21, 108, 39, 0.5) 45%,
transparent 100%
);
opacity: 90%;
z-index: 1;
pointer-events: none;
}/* Alt Beyaz Dalga Zemin (Platform) */
.slider-bottom-shape {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
z-index: 15; /* Çuvalın arkasında kalır */
pointer-events: none;
}.slider-bottom-shape svg {
display: block;
width: 100%;
height: 120px; /* Zemin belirgin olsun diye yükseklik */
}/* --- İKİ SÜTUNLU YAPI (FLEXBOX) --- */
.slide-content-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
position: relative;
/* Z-index'i dalgadan (15) yüksek verdik ki çuval beyaz dalganın ÜSTÜNE otursun */
z-index: 20;
}/* --- SOL SÜTUN: YAZILAR --- */
.slider-container .slide .textic {
flex: 1;
max-width: 550px;
color: #fff;
align-self: center; /* Yazıları dikeyde ortalar */
}.slider-container .slide .textic .text1 {
display: block;
font-size: 42px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 25px;
}.slider-container .slide .textic .text2 {
display: block;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
margin-bottom: 30px;
}/* --- SAĞ SÜTUN: YERE OTURAN ÜRÜN GÖRSELİ --- */
.product-image-wrap {
flex: 1;
display: flex;
justify-content: flex-end; /* Sağa yaslar */
align-items: flex-end; /* Çuvalı tam olarak alt zemine (aşağı) yapıştırır */
padding-bottom: 0px; /* Beyaz dalganın yüksekliği kadar boşluk bırakıp tam üstüne oturtur */
padding-right: 50px; /* Ok işaretine değmemesi için */
opacity: 0;
transform: translateX(0px);
margin-bottom: -230px;
}.product-image-wrap .product-img {
max-width: 100%;
max-height: 70vh; /* Zemine oturduğu için büyük ve tok görünür */
object-fit: contain;
/* Gölge aşağıya doğru verildi, çuvalın zemine ağırlık yaptığı hissi yaratıldı */
filter: drop-shadow(-20px 25px 20px rgba(0, 0, 0, 0.65));
transform-origin: bottom center;
}/* --- ANİMASYONLAR (SLAYT AKTİF OLDUĞUNDA) --- */
.slider-container .slide.active {
opacity: 1;
}.slider-container .slide.active img.bg-img {
z-index: 1;
}/* Ürünün Sağdan Gelip Sertçe Zemine Oturma Animasyonu */
.slider-container .slide.active .product-image-wrap {
animation: slideInAndSettle 1s cubic-bezier(0.25, 1, 0.2, 1) 0.3s forwards;
}@keyframes slideInAndSettle {
0% {
opacity: 0;
transform: translateX(120px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}/* --- İKONLAR (ÖZELLİKLER) --- */
.slider-container .slide .slider-features {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 40px;
}.slider-container .slide .feature-item {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
font-size: 15px;
font-weight: 500;
opacity: 0;
transform: translateY(30px);
}.slider-container .slide .icon-wrap {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
}.slider-container .slide .icon-wrap svg {
width: 22px;
height: 22px;
}/* İkon Gelme Animasyonları */
.slider-container .slide.active .feature-item {
animation: featureFadeUp 0.6s ease-out forwards;
}
.slider-container .slide.active .feature-item:nth-child(1) {
animation-delay: 0.5s;
}
.slider-container .slide.active .feature-item:nth-child(2) {
animation-delay: 0.7s;
}
.slider-container .slide.active .feature-item:nth-child(3) {
animation-delay: 0.9s;
}@keyframes featureFadeUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}/* --- YÖN BUTONLARI --- */
.slider-container .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #00000080;
fill: #fff;
border: none;
padding: 5px 10px;
font-size: 23px;
display: flex;
align-items: center;
font-weight: 700;
cursor: pointer;
border-radius: 5px;
z-index: 10;
transition: background-color 0.3s ease;
height: 42px;
width: 42px;
}.slider-container .slider-btn:hover {
background-color: #000c;
}
.slider-container .prev-btn {
left: 15px;
}
.slider-container .next-btn {
right: 15px;
}/* --- MOBİL CİHAZLAR (RESPONSIVE) --- */
@media (max-width: 992px) {
.slide-content-wrapper {
flex-direction: column;
justify-content: center;
text-align: center;
gap: 20px;
padding-top: 80px; /* Mobilde Header payı */
}.slider-container .slide .textic {
display: flex;
flex-direction: column;
align-items: center;
}.slider-container .slide .slider-features {
justify-content: center;
}/* Mobilde Dalga Boyutu Düşer */
.slider-bottom-shape svg {
height: 60px;
}/* Mobilde Çuvalın Oturma Ayarı */
.product-image-wrap {
justify-content: center;
padding-bottom: 25px; /* Mobilde dalganın üstüne tam oturması için pay */
padding-right: 0;
/* Mobilde aşağıdan gelip zemine oturma animasyonu */
animation: slideInUpAndSettle 0.8s cubic-bezier(0.25, 1, 0.2, 1) 0.3s
forwards !important;
}@keyframes slideInUpAndSettle {
0% {
opacity: 0;
transform: translateY(60px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}.product-image-wrap .product-img {
max-height: 40vh; /* Mobilde ekranı tamamen kaplamaması için sınır */
}.slider-container .slide .textic .text1 {
font-size: 28px;
}.slider-container .slide .textic .text2 {
font-size: 14px;
line-height: 1.4;
margin-bottom: 30px;
}.product-image-wrap {
margin-bottom: -40px;
}.slider-bottom-shape {
display: none;
}
}