/* --- GENEL AYARLAR --- */
.slider-container {
position: relative;
width: 100%;
height: 80vh;
/* Yüksekliği ekrana göre dinamik ayarlar */
min-height: 600px;
background-color: #000;
overflow: hidden;
margin-top: 124px;
}.slider-container .swiper {
width: 100%;
height: 100%;
}.slider-container .swiper-slide {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}/* --- ARKA PLAN VE OVERLAY (KARARTMA) --- */
.slider-container .swiper-slide img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transform: scale(1);
transition: transform 8s ease;
/* Resim yakınlaşma hızı */
}.slider-container .swiper-slide-active img {
transform: scale(1.08);
/* Ken Burns efekti (Yavaşça yakınlaşma) */
}/* Tüm slaytlara şık bir karartma atıyoruz ki yazılar okunsun */
.slider-container .slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.2) 100%
);
z-index: 2;
}/* --- YOUTUBE VİDEO --- */
.slider-container .video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}.slider-container #player {
width: 100%;
height: 100%;
transform: scale(1.5);
}/* Siyah bantları yok etmek için scale edildi *//* --- YAZI VE İÇERİK YAPISI --- */
.slider-container .container {
z-index: 3;
position: relative;
width: 100%;
max-width: 1200px;
padding: 0 20px;
}.slider-container .textic {
text-align: center;
color: #fff;
}/* Slogan 1 (Üstteki İnce Yazı) */
.slider-container .text1 {
font-size: 1.2rem;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.9);
}/* Slogan 2 (Büyük Kalın Yazı) */
.slider-container .text2 {
font-size: 50px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 40px;
text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}/* --- BUTON TASARIMI --- */
.slider-container .btn {
display: inline-block;
padding: 16px 40px;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
text-decoration: none;
border: 2px solid #fff;
border-radius: 4px;
transition: all 0.4s ease;
backdrop-filter: blur(5px);
}.slider-container .btn:hover {
background-color: #fff;
color: #000;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}/* --- YAZI ANİMASYONLARI (FADE & SLIDE UP) --- */
.slider-container .text1,
.slider-container .text2,
.slider-container .btn {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.8s ease,
transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}/* Slayt aktif olunca sırayla gelsinler */
.slider-container .swiper-slide-active .text1 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}.slider-container .swiper-slide-active .text2 {
opacity: 1;
transform: translateY(0);
transition-delay: 0.6s;
}.slider-container .swiper-slide-active .btn {
opacity: 1;
transform: translateY(0);
transition-delay: 0.8s;
}/* --- SWIPER OKLARI VE NOKTALARI --- */
.slider-container .swiper-button-next,
.slider-container .swiper-button-prev {
color: rgba(255, 255, 255, 0.7) !important;
transition: 0.3s;
}.slider-container .swiper-button-next:hover,
.slider-container .swiper-button-prev:hover {
color: #fff !important;
transform: scale(1.1);
}.slider-container .swiper-pagination-bullet {
background: #fff !important;
opacity: 0.5;
width: 10px;
height: 10px;
transition: 0.3s;
}.slider-container .swiper-pagination-bullet-active {
opacity: 1;
width: 25px;
border-radius: 5px;
}/* Aktif nokta uzun çizgi olur *//* Mobil Uyumluluk */
@media (max-width: 1200px) {
.stats-section {
padding: 35px 0 !important;
}.benefits-grid::before {
display: none;
}.slider-container {
position: relative;
min-height: 200px;
background-color: #000;
overflow: hidden;
margin-top: 0;
height: 30vh;
}
.slider-container .text1 {
font-size: 1rem;
letter-spacing: 2px;
}.slider-container .text2 {
font-size: 2.2rem;
}.slider-container .btn {
padding: 12px 25px;
font-size: 0.9rem;
}.slider-container .slider-container {
height: 70vh;
min-height: 500px;
}
}