.hakkimizda-section {
padding: 80px 0;
background-color: #fff;
}.ozel-konteyner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 50px;
padding: 0 20px;
}/* --- SOL TARAF: RESİM KOMPOZİSYONU --- */
.resim-alani {
flex: 1;
min-width: 350px;
position: relative;
display: flex;
justify-content: flex-start;
}.ana-resim-cerceve {
width: 100%;
position: relative;
z-index: 1;
}.ana-resim-cerceve img {
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
display: block;
}/* Resim üzerindeki şık "Oynat" veya "Logo" ikonu tarzı detay */
.resim-ustu-kart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: rgba(200, 35, 51, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 30px;
border: 5px solid #fff;
z-index: 2;
cursor: pointer;
transition: 0.3s;
}
.resim-ustu-kart:hover { transform: translate(-50%, -50%) scale(1.1); }/* --- SAĞ TARAF: İÇERİK --- */
.icerik-alani {
flex: 1;
min-width: 350px;
}.ust-etiket {
color: var(--ana-kirmizi);
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
display: block;
}.ana-baslik {
color: var(--koyu-lacivert);
font-size: 35px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 25px;
}.aciklama-metni {
color: #555;
font-size: 16px;
line-height: 1.7;
margin-bottom: 35px;
}/* --- İSTATİSTİK KUTULARI (Görseldeki gibi) --- */
.istatistik-row {
display: flex;
gap: 20px;
margin-bottom: 40px;
}.ist-kutu {
background: var(--gri-arka);
padding: 30px 20px;
border-radius: 15px;
flex: 1;
text-align: center;
transition: 0.3s;
border-bottom: 4px solid transparent;
}.ist-kutu:hover {
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border-bottom-color: var(--ana-kirmizi);
transform: translateY(-5px);
}.ist-sayi {
display: block;
font-size: 45px;
font-weight: 800;
color: var(--ana-kirmizi);
margin-bottom: 5px;
}.ist-baslik {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--koyu-lacivert);
text-transform: uppercase;
letter-spacing: 1px;
}.detay-buton {
display: inline-block;
background-color: var(--ana-kirmizi);
color: #fff;
padding: 16px 40px;
border-radius: 15px;
text-decoration: none;
font-weight: 700;
transition: 0.3s;
box-shadow: 0 10px 20px rgba(200, 35, 51, 0.2);
}.detay-buton:hover {
background-color: var(--koyu-lacivert);
transform: translateY(-3px);
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 992px) {
.ozel-konteyner {
flex-direction: column;
text-align: center;
}
.resim-alani {
width: 100%;
justify-content: center;
margin-bottom: 30px;
}
.ana-resim-cerceve { width: 100%; }
.ana-baslik { font-size: 32px; }
.istatistik-row {
flex-direction: column;
}
}/* Bölüm Ayarları */
.parallax-section {
position: relative;
width: 100%;
height: 450px; /* Bölüm yüksekliği */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
/* Sabit Arka Plan (Parallax Efekti) */
background-image: url('../images/yat.jpg'); /* Şık bir marina veya yat görseli koyun */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover !important;
}/* Karartma Katmanı (Yazıların okunması için) */
.parallax-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(39 102 255 / 60%); /* %60 siyah karartma */
z-index: 1;
}.parallax-content {
position: relative;
z-index: 2;
color: #fff;
width: 90%;
max-width: 900px;
}/* Üstteki Küçük Kırmızı Başlık */
.parallax-content .firma-adi {
display: block;
color: white; /* Canlı kırmızı */
font-size: 14px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 15px;
}/* Değişen Slogan Alanı */
.slogan-slider {
position: relative;
height: 80px; /* Yazı yüksekliğine göre ayarlandı */
}.slogan-slider .slogan-item {
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: clamp(24px, 5vw, 35px); /* Mobilde küçülen, masaüstünde büyüyen font */
font-weight: 800;
text-transform: uppercase;
opacity: 0;
animation: slideInOut 12s infinite; /* 12 saniyede bir tur döner */
}/* Slogan Geçiş Animasyonları (Sıralı) */
.slogan-slider .slogan-item:nth-child(1) { animation-delay: 0s; }
.slogan-slider .slogan-item:nth-child(2) { animation-delay: 4s; }
.slogan-slider .slogan-item:nth-child(3) { animation-delay: 8s; }@keyframes slideInOut {
0% { opacity: 0; transform: translateY(20px); }
5% { opacity: 1; transform: translateY(0); }
28% { opacity: 1; transform: translateY(0); }
33% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 0; }
}/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
.parallax-section {
height: 350px;
background-attachment: scroll; /* Mobilde parallax bazı tarayıcılarda yorar, scroll yaptık */
}
.slogan-slider { height: 60px; }
}.hizmetler-section {
padding: 100px 0;
background-color: var(--acik-gri); /* Hakkımızda'dan ayrılması için hafif gri arka plan */
}.hizmet-konteyner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}/* Başlık Alanı */
.bolum-ust {
text-align: center;
margin-bottom: 60px;
}.bolum-ust .ust-etiket {
color: var(--ana-kirmizi);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
display: block;
margin-bottom: 10px;
}.bolum-ust h2 {
color: var(--koyu-lacivert);
font-size: 35px;
font-weight: 800;
margin-top: 15px;
}.baslik-cizgi {
width: 70px;
height: 4px;
background: var(--ana-kirmizi);
margin: 20px auto;
border-radius: 2px;
}/* Hizmet Kartları Grid */
.hizmet-grid {
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: center;
}.hizmet-kart {
flex: 1;
min-width: 350px;
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: all 0.4s ease;
display: flex;
flex-direction: column;
}.hizmet-kart:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(200, 35, 51, 0.15);
}/* Kart Resim Alanı */
.kart-resim {
width: 100%;
height: 250px;
position: relative;
overflow: hidden;
}.kart-resim img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}.hizmet-kart:hover .kart-resim img {
transform: scale(1.1);
}/* Resim üzerindeki kırmızı etiket */
.kart-tag {
position: absolute;
bottom: 20px;
left: 20px;
background: var(--ana-kirmizi);
color: #fff;
padding: 8px 20px;
border-radius: 15px;
font-weight: 600;
font-size: 13px;
z-index: 2;
}/* Kart İçerik Alanı */
.kart-icerik {
padding: 35px;
flex-grow: 1;
display: flex;
flex-direction: column;
}.kart-icerik h3 {
color: var(--koyu-lacivert);
font-size: 22px;
font-weight: 700;
margin-bottom: 30px;
margin-top: 0;
}.kart-icerik ul {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
}.kart-icerik ul li {
padding-left: 25px;
position: relative;
margin-bottom: 12px;
color: #555;
font-size: 13px;
line-height: 1.5;
}/* Liste öğesinin genel ayarı (konumlandırma için önemli) */
.kart-icerik ul li {
position: relative;
padding-left: 25px; /* Topun sığması için boşluk bıraktık */
list-style: none; /* Varsayılan noktaları kaldırdık */
margin-bottom: 10px;
}/* Kırmızı Yuvarlak Top (Pseudo Element) */
.kart-icerik ul li::before {
content: ""; /* İçeriği boş bıraktık çünkü şekil çizeceğiz */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* Dikeyde tam ortalamak için */
width: 10px; /* Topun genişliği */
height: 10px; /* Topun yüksekliği */
background-color: var(--ana-kirmizi);
border-radius: 50%; /* Tam yuvarlak yapar */
/* Animasyon Tanımı */
animation: pulse-efekti 2s infinite;
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); /* Başlangıç gölgesi */
}/* Parlama ve Şişme Animasyonu */
@keyframes pulse-efekti {
0% {
transform: translateY(-50%) scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}
70% {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); /* Dışa doğru yayılan halka */
}
100% {
transform: translateY(-50%) scale(0.95);
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
}
}.kart-icerik ul b {
color: var(--koyu-lacivert);
display: block;
margin-bottom: 2px;
}.kart-buton {
margin-top: auto;
color: var(--ana-kirmizi);
text-decoration: none;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
transition: 0.3s;
}.kart-buton:hover {
gap: 15px;
color: var(--koyu-lacivert);
}/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
.hizmetler-section { padding: 60px 0; }
.hizmet-kart { min-width: 100%; }
.bolum-ust h2 { font-size: 28px; }
}.premium-faq-section {
position: relative;
padding: 100px 0;
background-image: url('../images/tekne.jpg'); /* Arka plan resmi */
background-attachment: fixed;
background-size: cover !important;
background-position: center;
color: var(--beyaz);
}/* Koyu Overlay */
.premium-faq-section::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, rgb(0 0 0 / 92%) 0%, rgb(0 0 0 / 80%) 100%);
z-index: 1;
}.faq-wrapper {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}.faq-content.full-width {
width: 100%;
}.faq-ust-bilgi {
text-align: center;
margin-bottom: 50px;
}.faq-label {
color: var(--ana-kirmizi);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 15px;
display: block;
}.faq-content h2 {
font-size: 35px;
font-weight: 800;
line-height: 1.2;
margin: 0;
}/* 2'li Grid Yapısı */
.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Yan yana iki kolon */
gap: 20px;
align-items: start;
}.accordion-item {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
border: 1px solid rgba(255,255,255,0.1);
transition: 0.3s;
height: max-content;
}.accordion-header {
padding: 22px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
font-size: 15px;
gap: 15px;
}.accordion-item:hover {
background: rgba(255, 255, 255, 0.08);
}.accordion-item.active {
border-color: var(--ana-kirmizi);
background: rgba(200, 35, 51, 0.1);
}.accordion-item.active .accordion-header {
color: var(--ana-kirmizi);
}.arrow-icon {
min-width: 24px;
width: 24px;
height: 24px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 50%;
position: relative;
transition: 0.3s;
}.arrow-icon::before {
content: '+';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
}.accordion-item.active .arrow-icon {
background: var(--ana-kirmizi);
border-color: var(--ana-kirmizi);
transform: rotate(45deg);
}.accordion-body {
max-height: 0;
overflow: hidden;
transition: all 0.4s ease-in-out;
}.accordion-body p {
padding: 0 30px 25px 30px;
color: rgba(255,255,255,0.7);
line-height: 1.7;
margin: 0;
font-size: 15px;
}/* MOBİL UYUMLULUK */
@media (max-width: 992px) {
.faq-grid {
grid-template-columns: 1fr; /* Mobilde tek kolon */
}
.faq-content h2 {
font-size: 32px;
}
.premium-faq-section {
padding: 60px 0;
}
}.neden-biz-section {
padding: 100px 0;
background-color: var(--beyaz);
}.neden-konteyner {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}/* Başlık ve Alt Başlık */
.neden-ust {
text-align: center;
margin-bottom: 70px;
}.neden-ust .ust-etiket {
color: var(--ana-kirmizi);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
display: block;
margin-bottom: 10px;
}.neden-ust h2 {
color: var(--koyu-lacivert);
font-size: 35px;
margin-top: 20px;
font-weight: 800;
margin-bottom: 20px;
}/* Özellikler Grid Yapısı */
.neden-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
}.neden-kutu {
flex: 1;
min-width: 250px;
background: var(--beyaz);
padding: 40px 30px;
border-radius: 15px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid #eee;
position: relative;
overflow: hidden;
}/* Üzerine gelince kırmızı efekt */
.neden-kutu:hover {
transform: translateY(-10px);
border-color: var(--ana-kirmizi);
box-shadow: 0 15px 35px rgba(200, 35, 51, 0.1);
}/* İkon Tasarımı */
.neden-ikon {
width: 80px;
height: 80px;
background: var(--hafif-gri);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
transition: 0.3s;
}.neden-kutu:hover .neden-ikon {
background: var(--ana-kirmizi);
}.neden-ikon svg {
width: 40px;
height: 40px;
fill: var(--ana-kirmizi);
transition: 0.3s;
}.neden-kutu:hover .neden-ikon svg {
fill: var(--beyaz);
}/* Yazı Stilleri */
.neden-kutu h3 {
color: var(--koyu-lacivert);
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
}.neden-kutu p {
color: #666;
font-size: 15px;
line-height: 1.6;
}/* Dekoratif Arka Plan Sayısı (Hafif görünür) */
.neden-kutu .sayi-bg {
position: absolute;
top: -10px;
right: 10px;
font-size: 80px;
font-weight: 900;
color: rgba(0,0,0,0.03);
z-index: 0;
}/* MOBİL UYUMLULUK */
@media (max-width: 768px) {
.neden-grid {
flex-direction: column;
}
.neden-kutu {
min-width: 100%;
}
.neden-ust h2 {
font-size: 30px;
}
}/**//* Başlangıçta öğeleri gizle ve hazırlık yap */
.resim-alani, .icerik-alani, .hizmet-kart, .neden-kutu, .accordion-item, .bolum-ust {
opacity: 0;
transition: all 1.0s cubic-bezier(0.2, 0.6, 0.3, 1.0);
will-change: transform, opacity;
}/* JS ile bu class eklendiğinde canlanacaklar */
.element-gorundu {
opacity: 1 !important;
transform: translate(0, 0) scale(1) !important;
}/* Özel Yönlendirmeler (JS eklemeden önce transform ayarları) */
.resim-alani { transform: translateX(-80px); } /* Soldan gelir */
.icerik-alani { transform: translateX(80px); } /* Sağdan gelir */
.hizmet-kart, .neden-kutu { transform: translateY(50px); } /* Aşağıdan gelir */
.bolum-ust { transform: translateY(-30px); } /* Yukarıdan aşağı süzülür */
.accordion-item { transform: scale(0.95); } /* Hafif büyüyerek gelir *//**/.HomeBlog {
padding: 70px 0px;
position: relative;
background: #F5F6F6;
}.HomeBlog .swiper-oklar {
position: relative;
display: flex;
justify-content: end;
}.HomeBlog .swiper-oklar .swiper-button-next,
.HomeBlog .swiper-oklar .swiper-button-prev {
position: relative;
top: 0px;
left: 0px;
right: 0px;
margin-top: 0px;
background: transparent;
font-size: 26px;
color: #170566;
}.HomeBlog .swiper-oklar .swiper-button-prev {
margin-right: 40px;
}.HomeBlog .swiper-oklar .swiper-button-next:after,
.HomeBlog .swiper-oklar .swiper-button-prev:after {
display: none;
}.HomeBlog .swiper-oklar .swiper-button-next:hover,
.HomeBlog .swiper-oklar .swiper-button-prev:hover {
color: #00923F;
}.HomeBlog .blog-liste {
width: 100%;
height: auto;
}.HomeBlog .blog-liste .blog-liste-resim {
width: 100%;
height: 180px;
overflow: hidden;
}.HomeBlog .blog-liste .blog-liste-resim img {
width: 100%;
height: 100%;
object-fit: cover !important;
}.HomeBlog .blog-liste .tarih {
width: 100%;
font-size: 12px;
margin-bottom: 15px;
}.HomeBlog .blog-liste h3 {
width: 100%;
font-weight: 500;
font-size: 18px;
line-height: 24px;
display: block;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
display: -webkit-box;
text-align: justify;
}.HomeBlog .blog-liste p {
width: 100%;
font-size: 14px;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
display: -webkit-box;
text-align: justify;
}/* Swiper sınıflarını simüle eden temel CSS */
.gallery-thumbs-blog {
overflow: hidden;
position: relative;
width: 100%;
}.swiper-wrapper {
display: flex;
transition: transform 0.5s ease-out;
width: 100%;
cursor: grab;
user-select: none;
}.swiper-wrapper:active {
cursor: grabbing;
}.swiper-slide {
flex-shrink: 0;
width: 100%; /* JS ile dinamik hesaplanacak */
box-sizing: border-box;
}/* Okları görünür kılmak için (zaten mevcut olabilir) */
.swiper-oklar {
display: flex;
gap: 10px;
}
.swiper-button-prev, .swiper-button-next {
cursor: pointer;
}/* --- HOME BLOG YENİ TASARIM --- */
.HomeBlog {
padding: 100px 0;
background-color: #f6f6f6; /* Hafif kırık beyaz */
overflow: hidden;
}.HomeBlog .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}/* Üst Başlık ve Oklar */
.HomeBlog .site-baslik1 small {
display: block;
color: #be212b; /* Tema rengi */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
font-size: 13px;
}.HomeBlog .site-baslik1 h3 {
font-size: 32px;
font-weight: 800;
color: #1a1a1a;
line-height: 1.2;
}/* Swiper Okları Tasarımı */
.HomeBlog .swiper-oklar {
display: flex;
justify-content: flex-end;
gap: 15px;
}.HomeBlog .swiper-button-prev,
.HomeBlog .swiper-button-next {
width: 50px;
height: 50px;
background: #fff;
border: 1px solid #eee;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}.HomeBlog .swiper-button-prev:hover,
.HomeBlog .swiper-button-next:hover {
background: #be212b;
border-color: #be212b;
}.HomeBlog .swiper-button-prev:hover i,
.HomeBlog .swiper-button-next:hover i {
color: #fff;
}.HomeBlog .swiper-button-prev i,
.HomeBlog .swiper-button-next i {
font-size: 20px;
color: #1a1a1a;
}/* Blog Kart Tasarımı */
.HomeBlog .blog-liste {
display: block;
background: #fff;
border-radius: 15px;
overflow: hidden;
text-decoration: none !important;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
height: 100%;
border: 1px solid #f0f0f0;
box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}/* Resim Alanı */
.HomeBlog .blog-liste-resim {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
}.HomeBlog .blog-liste-resim img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}/* İçerik Alanı */
.HomeBlog .blog-content {
padding: 25px;
}.HomeBlog .blog-liste .tarih {
display: inline-block;
font-size: 12px;
font-weight: 600;
color: #be212b;
background: rgba(190, 33, 43, 0.05);
padding: 4px 12px;
border-radius: 50px;
margin-bottom: 15px;
}.HomeBlog .blog-liste h3 {
font-size: 19px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.4;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 52px; /* Başlık hizası için sabit yükseklik */
transition: color 0.3s;
}.HomeBlog .blog-liste:hover h3 {
color: #be212b;
}.HomeBlog .blog-liste p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
height: 67px; /* Açıklama hizası için sabit yükseklik */
}/* Mobil Düzenlemeler */
@media (max-width: 991px) {
.HomeBlog { padding: 60px 0; }
.HomeBlog .swiper-oklar { display: none; } /* Mobilde kaydırma elle yapılır */
.HomeBlog .site-baslik1 { text-align: center !important; margin-bottom: 30px; }
.HomeBlog .blog-liste-resim { height: 200px; }
}@media(max-width:1024px){
.resim-alani{
display: none;
}
}