/* Ana Kapsayıcılar */
.hero-video-bolumu {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
color: #fff;
margin-top: 0px;
}.hero-video-bolumu .video-arkaplan {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}.hero-video-bolumu .video-arkaplan iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
transform: translate(-50%, -50%);
}/* Soldan sağa açılan degrade overlay */
.hero-video-bolumu .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(
90deg,
rgba(31, 41, 55, 0.95) 0%,
rgba(31, 41, 55, 0.7) 40%,
rgba(31, 41, 55, 0.2) 100%
);
}/* İçerik Konumlandırma */
.icerik-container {
position: relative;
z-index: 2;
width: 100%;
margin: 0 auto;
padding: 0 30px;
}.hero-video-bolumu .icerik {
max-width: 650px;
text-align: left;
margin-top: 50px;
}/* Tipografi */
.ana-slogan {
font-size: 45px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
}/* HTML'den okunan Dinamik Metin Animasyonu */
.degisen-metin {
color: var(--hover-color-2); /* Purex Kurumsal Renk */
display: inline-block;
transition:
opacity 0.5s ease,
transform 0.5s ease;
}.degisen-metin.gizle {
opacity: 0;
transform: translateY(15px);
}.alt-aciklama {
font-size: 15px;
color: #e5e7eb;
line-height: 1.6;
margin-bottom: 40px;
font-weight: 400;
}/* Yeni: Hizmetlerimizi İnceleyin Butonu */
.action-btn {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: #fff;
padding: 14px 22px;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
border: solid 1px #fff;
}.action-btn:hover {
background-color: var(--hover-color-2); /* Hover Rengi */
transform: translateY(-3px); /* Yukarı kalkma efekti */
border-color: var(--hover-color-2);
color: #fff;
}.btn-icon22 svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}/* Butonun üzerine gelince ok işareti sağa kaysın */
.action-btn:hover .btn-icon22 svg {
transform: translateX(6px);
}/* Mobil Cihazlar İçin Ayarlar */
@media (max-width: 768px) {
.ana-slogan {
font-size: 36px;
}
.alt-aciklama {
font-size: 16px;
}
.icerik-container {
text-align: center;
padding: 0 20px;
}
.hero-video-bolumu .icerik {
text-align: center;
margin: 0 auto;
}
.hero-video-bolumu .overlay {
background: rgba(31, 41, 55, 0.85);
}
.degisen-metin {
display: block;
}
}/* Alt Ovallik Tasarımı */
.alt-ovallik {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg); /* SVG'yi ters çevirerek alt kısma oturtuyoruz */
z-index: 3; /* İçerik ve overlay'in üzerinde görünmesi için */
}.alt-ovallik svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 80px; /* Ovalliğin yüksekliğini buradan ayarlayabilirsin */
}.alt-ovallik .shape-fill {
fill: #ffffff; /* Altındaki bölüm beyazsa beyaz kalmalı */
}/* Mobil cihazlarda ovallik yüksekliğini biraz düşürebilirsin */
@media (max-width: 768px) {
.alt-ovallik svg {
height: 40px;
}
}/* Minimalist Stil */
.minimal-features {
display: flex;
justify-content: space-between;
align-items: center;
margin: 40px auto;
padding: 20px;
gap: 20px;
}.m-feature-item {
display: flex;
align-items: center;
flex: 1;
gap: 15px;
padding: 15px;
transition: opacity 0.3s ease;
}/* İkon Stili */
.m-icon {
display: flex;
align-items: center;
justify-content: center;
color: #fff; /* İkon Rengi */
min-width: 40px;
}/* Metin Stili */
.m-text h3 {
margin: 0;
font-size: 15px;
font-weight: 500;
color: #fff;
line-height: 1.4;
}/* Ayırıcı Çizgi (Sadece masaüstünde yan yana iken görünür) */
.m-feature-item:not(:last-child) {
border-right: 1px solid #ffffff0d;
}/* Hover Efekti */
.m-feature-item:hover {
opacity: 0.7;
}.hero-video-bolumu .video-arkaplan iframe {
/* Mevcut kodların kalsın, sadece aşağıdakini ekle veya güncelle */
pointer-events: none !important;
user-select: none;
}/* --- MOBİL OPTİMİZASYON (768px ve Altı) --- */
@media (max-width: 768px) {
.hero-video-bolumu {
/* Mobilde cihaz boyu değiştikçe (adres çubuğu gizlenmesi gibi) zıplama yapmaması için */
height: 50svh;
margin-top: 70px;
display: flex;
align-items: center;
justify-content: center;
}/* Video Overlay: Mobilde okunabilirliği artırmak için biraz daha koyu */
.hero-video-bolumu .overlay {
background: linear-gradient(
180deg,
rgba(31, 41, 55, 0.85) 0%,
rgba(31, 41, 55, 0.9) 100%
);
}.icerik-container {
padding: 0 25px;
text-align: center;
}.hero-video-bolumu .icerik {
margin-top: 0; /* Mobilde ortalı durması için */
text-align: center;
width: 100%;
}/* Başlık Fontu: Daha şık ve dengeli */
.ana-slogan {
font-size: 32px; /* Çok büyük olup ekranı boğmaması için */
line-height: 1.1;
margin-bottom: 15px;
}.alt-aciklama {
font-size: 14px;
margin-bottom: 30px;
padding: 0 10px;
opacity: 0.9;
}/* Buton: Mobilde daha kolay tıklanabilir ve zarif */
.action-btn {
width: auto;
padding: 12px 28px;
font-size: 15px;
justify-content: center;
}/* --- Minimal Features (Özellikler) Bölümü - Mobil Düzenleme --- */
.minimal-features {
flex-direction: column; /* Yan yana değil, alt alta */
gap: 10px;
margin: 30px auto 0;
padding: 15px;
background: rgba(255, 255, 255, 0.05); /* Çok hafif transparan bir kutu */
border-radius: 15px;
backdrop-filter: blur(5px); /* Cam efekti (glassmorphism) */
width: 100%;
max-width: 320px;
}.m-feature-item {
padding: 8px 0;
justify-content: center;
width: 100%;
border-right: none !important; /* Masaüstünden kalan çizgiyi kaldır */
border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Hafif alt çizgi ekle */
}.m-feature-item:last-child {
border-bottom: none; /* Son itemda çizgi olmasın */
}.m-icon {
min-width: 30px;
}.m-icon svg {
width: 18px;
height: 18px;
}.m-text h3 {
font-size: 13px;
text-align: left;
}/* Alt Ovallik: Mobilde daha yumuşak bir geçiş */
.alt-ovallik svg {
height: 35px;
}
}/* Çok küçük ekranlar için (iPhone SE vs.) */
@media (max-width: 380px) {
.ana-slogan {
font-size: 28px;
}
.minimal-features {
padding: 10px;
}
}