/* --- GENEL CONTAINER AYARI --- */
.slider-container .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 4%;
margin-top: 60px;
position: relative;
width: 100%;
}/* ========================================= */
/* --- 1. SLIDER BÖLÜMÜ (HERO) --- */
/* ========================================= */
.slider-container {
position: relative;
width: 100%;
height: 100vh; /* Ekranın %90'ını kaplar, altındaki bölüm biraz görünür */
min-height: 500px;
background-color: #111;
overflow: hidden;
}.slider-container .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition:
opacity 1s ease-in-out,
visibility 1s;
display: flex;
align-items: center;
}.slider-container .slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}.slider-container .slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
/* Slider geçişinde resmin çok hafif yakınlaşma efekti (Lüks his) */
transform: scale(1.05);
transition: transform 6s ease-out;
}.slider-container .slide.active img {
transform: scale(1);
}/* Siyah Gradient Katman (Beyaz yazıların her resimde net okunması için) */
.slider-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.1) 100%
);
z-index: 2;
}/* İçerik (Yazılar ve Buton) */
.slider-content {
z-index: 3;
}.slider-container .slide .textic {
max-width: 650px;
color: #fff;
/* Başlangıçta yazılar aşağıda ve şeffaf */
transform: translateY(40px);
opacity: 0;
transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s; /* 0.3s Gecikmeli başlar */
}/* Slide aktif olunca yazılar yukarı kayarak belirir */
.slider-container .slide.active .textic {
transform: translateY(0);
opacity: 1;
}.slider-container .slide .textic .text1 {
display: block;
font-size: 47px;
font-weight: 700;
line-height: 1.1;
margin: 0 0 20px 0;
letter-spacing: 1px;
}.slider-container .slide .textic .text2 {
display: block;
font-size: 16px;
font-weight: 300;
line-height: 1.6;
opacity: 0.9;
margin: 0 0 40px 0;
}/* Slider Özel Lüks Buton */
.btn-slider {
display: inline-block;
padding: 16px 45px;
background-color: #c4ae8d; /* Premium Bej */
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 13px;
border-radius: 50px;
transition: all 0.4s ease;
font-weight: 500;
}.btn-slider:hover {
background-color: #ffffff;
color: #333333; /* Hoverda şık bir beyaz/siyah değişimi */
}/* --- Slider Okları (İnce ve Zarif) --- */
.slider-container .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
height: 55px;
width: 55px;
backdrop-filter: blur(4px); /* Arkayı hafif buğulu gösterir */
}.slider-container .slider-btn:hover {
background-color: #ffffff;
color: #333333;
border-color: #ffffff;
transform: translateY(-50%) scale(1.05);
}.slider-container .prev-btn {
left: 3%;
}
.slider-container .next-btn {
right: 3%;
}/* ========================================= */
/* --- 2. NEDEN BİZ BÖLÜMÜ (FEATURES) --- */
/* ========================================= */
.neden-biz {
background-color: #ffffff;
padding: 60px 0;
}.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}.feature-item {
text-align: center;
padding: 20px 0px;
transition: transform 0.3s ease;
}.feature-item:hover {
transform: translateY(-5px); /* Üzerine gelince hafif yukarı kalkar */
}.feature-item .icon-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #fcfbf8; /* Çok hafif bej arka plan */
color: #c4ae8d; /* İkonlar marka rengi */
font-size: 34px;
margin-bottom: 25px;
border: 1px solid rgba(196, 174, 141, 0.2);
transition: all 0.3s ease;
}.feature-item:hover .icon-wrapper {
background-color: #c4ae8d;
color: #ffffff; /* Hoverda ikon kutusu dolgulu olur */
}.feature-item h3 {
font-size: 17px;
font-weight: 600;
color: #333333;
margin: 0 0 15px 0;
letter-spacing: 0.5px;
}.feature-item p {
font-size: 14px;
line-height: 1.5;
color: #666666;
margin: 0;
font-weight: 400;
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 992px) {
.features-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.slider-container .slide .textic .text1 {
font-size: 36px;
}
.slider-container .slide .textic .text2 {
font-size: 16px;
}
.slider-container .slider-btn {
display: none;
} /* Mobilde okları gizleyip dokunmatik kaydırma bekleyebiliriz veya küçültebiliriz */
.slider-container {
height: 70vh;
}
}