/* Genel Konteyner */
.slider-container {
position: relative;
width: 100%;
height: 100vh;
/* Tam ekran yüksekliği */
background-color: var(--renk1);
;
/* Su mavisi yedek arka plan */
overflow: hidden;
}/* Slaytlar */
.slider-container .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
}.slider-container .slide.active {
opacity: 1;
z-index: 2;
}/* Arka Plan Resmi ve Karartma (Overlay) */
.slider-container .slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transform: scale(1.05);
/* Yavaşça küçülme efekti için başlangıç */
transition: transform 6s ease-out;
}.slider-container .slide.active img {
transform: scale(1);
}/* Yazıların okunması için resmin üzerine hafif siyah/mavi geçiş */
.slider-container .slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 31, 63, 0.7) 0%, rgba(0, 116, 217, 0.2) 100%);
z-index: 2;
}/* Metin Alanı */
.slider-container .slide .container {
position: relative;
z-index: 10;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}.slider-container .slide .textic {
max-width: 600px;
color: #fff;
animation: floatText 4s ease-in-out infinite;
}.slider-container .slide .textic .text0 {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 980px;
background: #e8f4fb;
color: var(--renk1);
margin-bottom: 10px;
}.slider-container .slide .textic .text1 {
display: block;
font-size: clamp(3.5rem, 8vw, 5.0rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: .02em;
margin-bottom: 20px;
font-family: var(--font1);
}.slider-container .slide .textic .text2 {
font-size: 1rem;
color: #fff;
line-height: 1.7;
margin: 0 0 32px;
}/* Buton Tasarımı (Su temalı) */
.slider-container .slide .btn {
background: var(--renk2);;
color:#fff;
display: inline-block;
font-size: .78rem;
font-weight: 700;
border-radius: 980px;
padding: 8px 18px;
letter-spacing: .03em;
transition: transform 6s ease-out;}.slider-container .slide .btn:hover {
transform: translateY(-3px);
color: #fff;
}/* Slider Yön Butonları */
.slider-container .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
fill: #fff;
border: none;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
/* Tam yuvarlak */
z-index: 15;
transition: all 0.3s ease;
height: 50px;
width: 50px;
}.slider-container .slider-btn:hover {
background-color: rgba(255, 255, 255, 0.5);
transform: translateY(-50%) scale(1.1);
}.slider-container .slider-btn svg {
width: 24px;
height: 24px;
}.slider-container .prev-btn {
left: 30px;
}.slider-container .next-btn {
right: 30px;
}/* =========================================
HAREKETLİ SVG DALGALARI (EN ALT KISIM)
========================================= */
.wave-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
/* Dalga yüksekliği */
z-index: 5;
overflow: hidden;
}.waves {
width: 100%;
height: 100%;
min-height: 100px;
max-height: 150px;
}/* Dalgaların animasyonları */
.parallax>use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}.parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}.parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}.parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}.parallax>use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}/* Animasyon Keyframeleri */
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}100% {
transform: translate3d(85px, 0, 0);
}
}@keyframes floatText {
0% {
transform: translateY(0px);
}50% {
transform: translateY(-8px);
}100% {
transform: translateY(0px);
}
}/* Mobil Uyumluluk */
@media (max-width: 768px) {
.slider-container .slide .textic .text1 {
font-size: 32px;
}.slider-container .slide .textic .text2 {
font-size: 14px;
}.wave-container {
height: 60px;
}.slider-container .prev-btn {
left: 10px;
}.slider-container .next-btn {
right: 10px;
}
}/* --- SLIDER MOBİL ÖZEL AYARLAR --- */
@media (max-width: 768px) {
.slider-container {
height: 50dvh; /* Dinamik viewport yüksekliği (Safari/Chrome bar hatasını önler) */
}/* 1. Metin Alanını Ortala */
.slider-container .slide .textic {
max-width: 100%;
text-align: center; /* Mobilde merkezleme her zaman daha şık durur */
padding: 0 10px;
margin-bottom: 80px; /* Alttaki dalgalara çarpmaması için boşluk */
}/* 2. Başlık Boyutu ve Aralığı */
.slider-container .slide .textic .text1 {
font-size: 34px; /* Daha okunaklı ve çarpıcı boyut */
line-height: 1.1;
margin-bottom: 15px;
}/* 3. Açıklama Metni */
.slider-container .slide .textic .text2 {
font-size: 15px;
line-height: 1.5;
margin-bottom: 25px;
opacity: 0.9;
padding: 0 15px;
}/* 4. Küçük Etiket (Badge) */
.slider-container .slide .textic .text0 {
font-size: 11px;
padding: 5px 12px;
margin-bottom: 15px;
}/* 5. Buton Tasarımı */
.slider-container .slide .btn {
padding: 12px 30px; /* Daha geniş dokunma alanı */
font-size: 14px;
width: 80%; /* Mobilde butonu belirginleştir */
max-width: 250px;
}/* 6. Yön Butonlarını Daha Zarif Yap (Veya Tamamen Gizle) */
.slider-container .slider-btn {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1); /* Daha şeffaf */
top: auto;
bottom: 100px; /* El hizasına yakın, aşağıya çekildi */
transform: none;
}.slider-container .prev-btn {
left: 20px;
}.slider-container .next-btn {
right: 20px;
}/* 7. Dalga Yüksekliği */
.wave-container {
height: 80px; /* Dalgalar mobilde biraz daha belirgin olabilir */
}/* 8. Overlay (Karartma) */
/* Mobilde metinlerin her zaman okunması için karartmayı biraz artırıyoruz */
.slider-container .slide::after {
background: linear-gradient(
to top,
rgba(0, 31, 63, 0.8) 0%,
rgba(0, 31, 63, 0.4) 50%,
rgba(0, 31, 63, 0.6) 100%
);
}
}/* Çok Küçük Ekranlar (iPhone SE vb.) */
@media (max-width: 400px) {
.slider-container .slide .textic .text1 {
font-size: 28px;
}
.slider-container .slide .textic .text2 {
display: -webkit-box;
-webkit-line-clamp: 3; /* Çok uzun metinleri mobilde keser */
-webkit-box-orient: vertical;
overflow: hidden;
}
}