/* TÜM CSS KURALLARI .hizmetler İLE BAŞLAR */
:root {
--primary-blue: #0a2342; /* Derin Lacivert (Yatçılık hissi) */
--accent-blue: #1756a9; /* Canlı Deniz Mavisi */
--text-gray: #6b7280;
--bg-color: #fafcff; /* Çok hafif, ferah bir arka plan */
--card-bg: #ffffff;
}.why-us-section {
width: 100%;
height: auto;
padding: 70px 0px;
}/* Üst Başlık Kısmı (İsteğe bağlı kullanabilirsin) */
.section-title-wrapper {
text-align: center;
margin-bottom: 60px;
}
.section-subtitle {
color: var(--accent-blue);
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
display: block;
}
.section-title {
color: var(--primary-blue);
font-size: 32px;
font-weight: 600;
margin: 0;
}/* 4'lü Kutu Izgarası */
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}/* Tekil Kutu Tasarımı */
.feature-card {
background: var(--card-bg);
padding: 40px 30px;
border-radius: 5px;
border: 1px solid #e5e7eb;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}/* Kutu Hover (Üzerine Gelme) Efekti */
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(10, 35, 66, 0.08);
border-color: transparent;
}/* İkon Çerçevesi */
.icon-box {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #f3f6fa;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
transition: all 0.4s ease;
}/* İkon Hover Efekti */
.feature-card:hover .icon-box {
background-color: var(--primary-blue);
}/* SVG İkon Çizgi Ayarları (Zarif Line-Art) */
.icon-box svg {
width: 32px;
height: 32px;
fill: none;
stroke: var(--primary-blue);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: all 0.4s ease;
}/* İkon Rengi Hover'da Beyaz Olur */
.feature-card:hover .icon-box svg {
stroke: #ffffff;
}.feature-title {
color: var(--primary-blue);
font-size: 18px;
font-weight: 600;
margin: 0 0 15px 0;
}.feature-desc {
color: var(--text-gray);
font-size: 14px;
line-height: 1.4;
font-weight: 500;
margin: 0 0 0px 0;
flex-grow: 1;
}.read-more-btn {
display: inline-flex;
align-items: center;
color: var(--accent-blue);
font-size: 13px;
font-weight: 500;
text-decoration: none;
letter-spacing: 0.5px;
transition: color 0.3s;
margin-top: auto;
}.read-more-btn svg {
width: 16px;
height: 16px;
margin-left: 6px;
transition: transform 0.3s;
}.read-more-btn:hover {
color: var(--primary-blue);
}.read-more-btn:hover svg {
transform: translateX(5px);
}/* Mobil Uyumluluk */
@media (max-width: 1024px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.features-grid {
grid-template-columns: 1fr;
}
.feature-card {
padding: 30px 20px;
}
}/**/.hizmetler {
/* Görseldeki zarif font yapısını taklit eden font ailesi */
padding: 0px 0px 80px;
color: #1a2238; /* Koyu lacivert/gri metin rengi */
}.hizmetler * {
box-sizing: border-box;
}.hizmetler .hizmetler-container {
max-width: 1100px;
margin: 0 auto;
}/* En Üstteki Ana Başlık */
.hizmetler .hizmetler-ana-baslik {
text-align: center;
font-size: 36px;
font-weight: 700;
color: #1a253c; /* Koyu lacivert marin rengi */
margin-top: 0;
margin-bottom: 70px;
}/* En Üstteki Ana Başlık */
.hizmetler .hizmetler-ana-baslik span {
color: #fecd01; /* Koyu lacivert marin rengi */
}/* Satır Düzeni (Yazı ve Resim Yanyana) */
.hizmetler .hizmetler-oge {
display: flex;
align-items: center; /* Dikeyde ortala */
justify-content: space-between;
gap: 60px; /* Yazı ve resim arasındaki boşluk */
margin-bottom: 80px;
}/* 2. Satırdaki Ters Dizilim (Resim Solda, Yazı Sağda) */
.hizmetler .hizmetler-oge.hizmetler-ters {
flex-direction: row-reverse;
}/* İçerik (Yazıların bulunduğu sol/sağ alan) */
.hizmetler .hizmetler-icerik {
flex: 1;
max-width: 500px; /* Metinlerin çok uzayıp okunabilirliği bozmaması için */
}.hizmetler .hizmetler-baslik {
font-size: 28px;
font-weight: 700;
color: #1a253c;
margin-top: 0;
margin-bottom: 25px;
line-height: 1.3;
}.hizmetler .hizmetler-metin {
font-size: 15px;
line-height: 1.5;
color: #333333;
margin-bottom: 40px;
font-weight: 400;
}/* Zarif Mavi Butonlar */
.hizmetler .hizmetler-buton {
display: inline-block;
background-color: #eeeeee; /* Açık mavi arkaplan */
color: #393939; /* Görseldeki mavi yazı rengi */
font-size: 15px;
font-weight: 600;
text-decoration: none;
padding: 14px 30px;
border-radius: 50px; /* Görseldeki gibi tam yuvarlak kenarlar */
transition: all 0.3s ease;
}.hizmetler .hizmetler-buton:hover {
background-color: #ffcb01;
color: #000;
}/* Resim Alanı */
.hizmetler .hizmetler-resim {
flex: 1;
display: flex;
justify-content: center;
}.hizmetler .hizmetler-resim img {
width: 100%;
max-width: 550px;
height: 500px;
border-radius: 5px;
object-fit: cover;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* Tasarıma şıklık katması için çok hafif gölge */
display: block;
}/* Mobil ve Tablet Uyumluluğu (Responsive) */
@media (max-width: 900px) {
.hizmetler .hizmetler-oge,
.hizmetler .hizmetler-oge.hizmetler-ters {
flex-direction: column; /* Mobilde alt alta gelsin */
text-align: center;
gap: 40px;
margin-bottom: 80px;
}.hizmetler .hizmetler-ana-baslik {
font-size: 30px;
margin-bottom: 50px;
}.hizmetler .hizmetler-icerik {
max-width: 100%;
}
}/**/.about-section-two {
position: relative;
padding: 0 0 80px;
z-index: 2;
}.about-section-two .icon-big-boat-2 {
position: absolute;
right: 6px;
bottom: 3px;
z-index: -1;
pointer-events: none;
}.bounce-y {
-webkit-animation: bounce-y 10s infinite linear;
animation: bounce-y 10s infinite linear;
}.icon-big-boat-2 {
width: 229px;
height: 739px;
background-image: url(../images/icon-big-boat-2.png);
}.auto-container {
position: static;
padding: 0px 15px;
margin: 0 auto;
width: 100%;
}.about-section-two .outer-box {
position: relative;
background-color: #f4efec;
}.about-section-two .content-column {
margin-bottom: 0;
z-index: 1;
}@media (min-width: 992px) {
.order-lg-2 {
order: 2 !important;
}
}
@media (min-width: 1200px) {
.offset-xl-1 {
margin-left: 8.33333333%;
}
}@media (min-width: 1200px) {
.col-xl-11 {
flex: 0 0 auto;
width: 91.66666667%;
}
}.about-section-two .content-column .inner-column {
padding: 79px 0;
position: relative;
}.about-section-two .content-column .inner-column .inner {
position: relative;
z-index: 1;
}@keyframes slowRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}.about-section-two .content-column .inner-column .inner .icon-wheel-1 {
position: absolute;
top: -54px;
right: -150px;
pointer-events: none;
animation: slowRotate 200s linear infinite;
z-index: -1;
}.bounce-y {
-webkit-animation: bounce-y 10s infinite linear;
animation: bounce-y 10s infinite linear;
}.icon-wheel-1 {
width: 144px;
height: 163px;
background-image: url(../images/icon-wheel-1.png);
}.sec-title {
position: relative;
margin-bottom: 60px;
}.about-section-two .sec-title {
margin-bottom: 20px;
}.sec-title .sub-title {
position: relative;
display: inline-block;
font-size: 14px;
line-height: 30px;
font-weight: 700;
color: #faca0c;
letter-spacing: 0.2em;
top: -5px;
margin-bottom: 2px;
margin-top: 7px;
text-transform: uppercase;
}.sec-title h2 {
position: relative;
font-size: 39px;
color: #000;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 0;
}p,
.text {
color: #54595f;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.01em;
}.about-section-two .content-column .inner-column .inner ul {
margin-top: 24px;
}.about-section-two .content-column .inner-column .inner ul li:first-child {
margin-top: 0px;
}.about-section-two .content-column .inner-column .inner ul li {
position: relative;
padding-left: 32px;
list-style: none;
margin-top: 10px;
font-weight: 500;
}
.about-section-two .content-column .inner-column .inner ul li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FECC00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}.about-section-two .image-column .inner-column .icon-sailboat-line-2 {
bottom: 40px;
width: 317px;
height: 494px;
position: absolute;
pointer-events: none;
left: 108px;
background-image: url(../images/icon-sailboat-line-2.png);
}.bounce-y {
-webkit-animation: bounce-y 10s infinite linear;
animation: bounce-y 10s infinite linear;
}.about-section-two .image-column .inner-column .image-box .image {
position: relative;
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
left: -102px;
top: 91px;
border: 15px solid #fff;
max-width: 292px;
z-index: 1;
-webkit-box-shadow: 0 0 49px rgba(0, 0, 0, 0.12);
box-shadow: 0 0 49px rgba(0, 0, 0, 0.12);
}.about-section-two .image-column .inner-column .image-box figure {
margin: 0;
}.overlay-anim:after {
background: rgba(255, 255, 255, 0.3);
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
opacity: 1;
z-index: 9;
pointer-events: none;
}.about-section-two .image-column .inner-column .image-box .image-2 {
position: absolute;
bottom: 150px;
border: 10px solid #fff;
left: 94px;
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}.about-section-two .image-column .inner-column .image-box figure {
margin: 0;
}img {
display: inline-block;
max-width: 100%;
height: auto;
}.overlay-anim:after {
background: rgba(255, 255, 255, 0.3);
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0;
opacity: 1;
z-index: 9;
pointer-events: none;
}* {
margin: 0px;
padding: 0px;
border: none;
outline: none;
font-size: 100%;
}
.bounce-y {
-webkit-animation: bounce-y 10s infinite linear;
animation: bounce-y 10s infinite linear;
}.bounce-x {
-webkit-animation: bounce-x 10s infinite linear;
animation: bounce-x 10s infinite linear;
}.zoom-one {
-webkit-animation: zoom-one 10s infinite linear;
animation: zoom-one 10s infinite linear;
}.zoom-two {
-webkit-animation: zoom-two 5s infinite linear;
animation: zoom-two 5s infinite linear;
}@-webkit-keyframes float {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}@keyframes float {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes bounce-y {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounce-y {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes bounce-x {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounce-x {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes zoom-one {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
}
@keyframes zoom-one {
0% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
50% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
}
@-webkit-keyframes zoom-two {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoom-two {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}/**/.marine-counter-section {
position: relative;
background: url("../images/sayac.webp") center center / cover no-repeat;
background-attachment: fixed; /* Parallax şıklığı */
padding: 100px 0;
color: #ffffff;
}.counter-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Denizci Laciverti Transparan Katman */
background: rgba(9, 25, 48, 0.85);
z-index: 1;
}.counter-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
text-align: center;
}.counter-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
transition: transform 0.3s ease;
}.counter-box:hover {
transform: translateY(-10px);
}.icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(212, 175, 55, 0.3); /* Altın rengi hafif sınır */
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}.icon-wrapper svg {
width: 40px;
height: 40px;
color: #ffcb01; /* Lüks Altın Rengi */
}.counter-content {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}.counter-number {
font-size: 3rem;
font-weight: 700;
line-height: 1;
color: #ffffff;
}.plus {
font-size: 2.2rem;
font-weight: 700;
color: #ffcb01;
margin-left: 5px;
}.counter-title {
margin-top: 13px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: #cbd5e1;
margin-top: 10px;
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.counter-container {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}@media (max-width: 576px) {
.counter-container {
grid-template-columns: 1fr;
gap: 40px;
}
}/**//* Genel Galeri Alanı Ayarları */
.galeri-alani {
padding: 80px 0;
background-color: #f8fafc; /* Görselleri ortaya çıkaran çok açık gri arkaplan */
}.galeri-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}/* Başlık Tasarımı */
.galeri-header {
text-align: center;
margin-bottom: 50px;
}.galeri-title {
font-size: 38px;
color: #091930;
font-weight: 700;
margin-bottom: 10px;
}.galeri-title span {
color: #ffcb01; /* Altın sarısı vurgu */
}.galeri-subtitle {
color: #64748b;
font-size: 17px;
margin-bottom: 20px;
}.galeri-divider {
width: 60px;
height: 3px;
background-color: #ffcb01;
margin: 0 auto;
}/* ---------------- GALERİ GRID YAPISI ---------------- */
.galeri {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 250px; /* Her bir kutunun standart yüksekliği */
gap: 15px; /* Fotoğraflar arası boşluk */
margin-bottom: 40px;
}/* Öne çıkan fotoğraf 2 sütun ve 2 satır genişliğinde olur */
.item-large {
grid-column: span 2;
grid-row: span 2;
}/* Galeri Kutusu (Her bir fotoğraf) */
.galeri-item {
position: relative;
overflow: hidden;
border-radius: 5px; /* Zarif oval köşeler */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
cursor: pointer;
}.galeri-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}/* Karanlık Katman (Hover olana kadar gizli) */
.galeri-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(9, 25, 48, 0.85); /* Denizci Laciverti Transparan */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0; /* Başlangıçta görünmez */
transition: opacity 0.4s ease;
padding: 20px;
text-align: center;
}.overlay-kategori {
color: #ffcb01;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
transform: translateY(20px); /* Aşağıdan gelme efekti için aşağıda bekler */
transition: transform 0.4s ease;
}.overlay-baslik {
color: #ffffff;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
transform: translateY(20px);
transition: transform 0.4s ease 0.1s; /* Kategori yazısından azıcık sonra gelir */
}/* Hover (Üzerine Gelme) Efektleri */
.galeri-item:hover img {
transform: scale(1.1); /* Resim hafifçe yakınlaşır */
}.galeri-item:hover .galeri-overlay {
opacity: 1; /* Lacivert katman belirginleşir */
}.galeri-item:hover .overlay-kategori,
.galeri-item:hover .overlay-baslik {
transform: translateY(0); /* Yazılar yukarı kayarak yerine oturur */
}/* ---------------- TÜMÜNÜ GÖR BUTONU ---------------- */
.galeri-btn-wrapper {
text-align: center;
}/* Mobil Uyumluluk (Responsive Design) */
@media (max-width: 992px) {
.galeri {
grid-template-columns: repeat(2, 1fr);
}
.item-large {
grid-column: span 2; /* Tablette büyük resim tam genişlik kaplar */
}
}@media (max-width: 576px) {
.galeri {
grid-template-columns: 1fr; /* Mobilde her resim alt alta dizilir */
}
.item-large {
grid-column: span 1;
grid-row: span 1; /* Mobilde büyük resim diğerleriyle aynı boyuta gelir */
}
.galeri-title {
font-size: 2rem;
}
}/**//* Genel SSS Alanı */
.sss-section {
padding: 100px 0;
background-color: #ffffff;
}.sss-container {
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1.2fr; /* Sağ taraf (sorular) biraz daha geniş */
gap: 60px;
align-items: center;
}/* Sol Taraf: Görsel ve Rozet */
.sss-image-wrapper {
position: relative;
border-radius: 5px;
overflow: visible;
box-shadow: 0 20px 40px rgba(9, 25, 48, 0.08);
}.sss-image {
width: 100%;
height: 550px;
object-fit: cover;
border-radius: 5px;
display: block;
}/* Altın Sarısı Lüks Rozet */
.sss-badge {
position: absolute;
bottom: -30px;
right: -30px;
background-color: #ffcb01; /* Altın Sarısı */
color: #091930; /* Lacivert */
width: 140px;
height: 140px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
border: 6px solid #ffffff;
z-index: 2;
animation: float 4s ease-in-out infinite; /* Hafif dalgalanma efekti */
}.badge-number {
font-size: 2.2rem;
font-weight: 700;
line-height: 1;
}.badge-text {
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
margin-top: 5px;
letter-spacing: 1px;
}@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}/* Sağ Taraf: Başlıklar */
.sss-subtitle {
color: #ffcb01;
font-size: 0.9rem;
letter-spacing: 2px;
font-weight: 600;
margin-bottom: 10px;
}.sss-title {
color: #091930;
font-size: 38px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.2;
}.sss-title span {
color: #ffcb01;
}.sss-divider {
width: 60px;
height: 3px;
background-color: #ffcb01;
margin-bottom: 40px;
}/* Akordiyon (Sorular) Yapısı */
.accordion-kutu {
display: flex;
flex-direction: column;
gap: 15px;
}.accordion-item {
background-color: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
overflow: hidden;
transition: all 0.3s ease;
}.accordion-item.active {
background-color: #ffffff;
border-color: #ffcb01;
box-shadow: 0 10px 20px rgba(9, 25, 48, 0.05);
}.accordion-header {
width: 100%;
text-align: left;
padding: 20px 25px;
background: none;
border: none;
font-size: 15px;
font-weight: 600;
color: #091930;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.3s ease;
}.accordion-item.active .accordion-header {
color: #ffcb01; /* Açık olan sorunun yazısı altın rengi olur */
}/* Artı/Eksi İkonu */
.accordion-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(9, 25, 48, 0.05);
color: #091930;
transition: all 0.4s ease;
}.accordion-icon svg {
width: 16px;
height: 16px;
transition: transform 0.4s ease;
}.accordion-item.active .accordion-icon {
background-color: #ffcb01;
color: #ffffff;
}/* Artı ikonunu Eksi'ye çeviren animasyon (45 derece döndürme) */
.accordion-item.active .accordion-icon svg {
transform: rotate(135deg);
}/* Cevap Alanı */
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out; /* Tereyağı gibi pürüzsüz açılma */
}.accordion-body-content {
padding: 0 25px 25px 25px;
color: #64748b;
font-size: 15px;
line-height: 1.6;
}/* Mobil Uyumluluk */
@media (max-width: 992px) {
.sss-container {
grid-template-columns: 1fr; /* Mobilde alt alta geçer */
gap: 50px;
}.sss-image {
height: 400px;
}.sss-badge {
right: 20px;
bottom: -20px;
width: 100px;
height: 100px;
}.badge-number {
font-size: 1.5rem;
}
.badge-text {
font-size: 0.65rem;
}
}/**//* --- GENEL FOOTER AYARLARI --- */
.footer {
position: relative;
/* Arka plan marin görseli (kendi görselinizle değiştirebilirsiniz) */
background: url("../images/footer.webp") center center / cover no-repeat;
background-attachment: fixed; /* Parallax şıklığı sağlar */
color: #ffffff;
border-top: 4px solid #ffcb01; /* Üst kısımda ince lüks altın çizgi */
padding-top: 80px;
}/* Denizci Laciverti Transparan Katman */
.footer .footer-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(
9,
25,
48,
0.92
); /* Rengi koyulaştırarak yazıları okutur */
z-index: 1;
}.footer .footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2; /* Overlay'in üstünde kalması için */
}.footer .footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 50px;
padding-bottom: 60px;
}/* --- 1. SÜTUN: MARKA & AÇIKLAMA --- */
.footer .footer-brand {
font-size: 2rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}.footer .footer-brand span {
color: #ffcb01; /* Altın Sarısı */
}.footer .footer-desc {
font-size: 0.95rem;
line-height: 1.8;
color: #cbd5e1;
margin-bottom: 25px;
}/* Sosyal Medya İkonları */
.footer .footer-socials {
display: flex;
gap: 15px;
}.footer .social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(212, 175, 55, 0.3);
color: #ffffff;
transition: all 0.3s ease;
}.footer .social-link svg {
width: 18px;
height: 18px;
}.footer .social-link:hover {
background-color: #ffcb01;
border-color: #ffcb01;
color: #091930;
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}/* --- ORTAK BAŞLIK AYARLARI --- */
.footer .footer-title {
font-size: 1.2rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 15px;
letter-spacing: 0.5px;
}.footer .footer-divider {
width: 40px;
height: 2px;
background-color: #ffcb01;
margin-bottom: 25px;
}/* --- LİNKLER (MENÜ & HİZMETLER) --- */
.footer .footer-links {
list-style: none;
padding: 0;
margin: 0;
}.footer .footer-links li {
margin-bottom: 8px;
}.footer .footer-links a {
color: #cbd5e1;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
}/* Linklerin başına ok işareti ve Hover efekti */
.footer .footer-links a::before {
content: "›";
color: #ffcb01;
font-size: 1.2rem;
margin-right: 8px;
transition: transform 0.3s ease;
}.footer .footer-links a:hover {
color: #ffcb01;
}.footer .footer-links a:hover::before {
transform: translateX(4px); /* Üzerine gelince ok sağa kayar */
}/* --- İLETİŞİM LİSTESİ --- */
.footer .footer-contact-list {
list-style: none;
padding: 0;
margin: 0;
}.footer .footer-contact-list li {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 10px;
color: #cbd5e1;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
}.footer .footer-contact-list svg {
width: 20px;
height: 20px;
color: #ffcb01;
flex-shrink: 0;
margin-top: 2px;
}.footer .footer-contact-list a {
color: #cbd5e1;
text-decoration: none;
transition: color 0.3s ease;
}.footer .footer-contact-list a:hover {
color: #ffcb01;
}/* --- ALT BİLGİ ÇUBUĞU (COPYRIGHT) --- */
.footer .footer-bottom {
position: relative;
z-index: 2;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(4, 13, 26, 0.5); /* Bir tık daha koyu alt şerit */
padding: 20px 0;
}.footer .footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: #94a3b8;
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 992px) {
.footer .footer-grid {
grid-template-columns: repeat(2, 1fr); /* Tablette 2 sütun */
}
}@media (max-width: 768px) {
.footer .footer-grid {
grid-template-columns: 1fr; /* Mobilde tek sütun */
gap: 40px;
}.footer .footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 10px;
}
}/**/.footer .footer_sosyal {
margin-top: 30px;
}/* "Bizi Takip Edin" Başlığı */
.footer .social-title {
font-size: 0.95rem;
font-weight: 600;
color: #d4af37; /* Altın Sarısı */
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
}/* ul.sosyal Liste Ayarları */
.footer .footer_sosyal {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 15px;
align-items: center;
}/* Buton Tasarımı */
.footer .footer_sosyal li a {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.05); /* Yarı saydam beyaz taban */
border: 1px solid rgba(212, 175, 55, 0.3); /* İnce altın rengi çerçeve */
color: #ffffff;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yaylanma efekti */
text-decoration: none;
}/* Sizin gönderdiğiniz SVG'lerin içindeki boyutları eziyoruz (Şart!) */
.footer .footer_sosyal li a svg {
width: 18px !important;
height: 18px !important;
fill: currentColor; /* Rengin a etiketinden miras alınmasını sağlar */
transition: all 0.3s ease;
}/* Mouse ile üzerine gelindiğinde (Hover) */
.footer .footer_sosyal li a:hover {
background-color: #d4af37; /* Buton altınımsı sarı olur */
border-color: #d4af37;
color: #091930; /* İçindeki ikon laciverte döner */
transform: translateY(-6px); /* Buton yukarı kalkar */
box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4); /* Etrafa altın sarısı ışık saçar */
}/* Eğer SVG içinde path varsa fill miras alsın */
.footer .footer_sosyal li a:hover svg path {
fill: #091930;
}@media(max-width:1024px){
.about-section-two .icon-big-boat-2{
display: none;
}.about-section-two .content-column .inner-column .inner .icon-wheel-1{
display: none;
}.about-section-two .image-column .inner-column .icon-sailboat-line-2 {
left: 18px;
}.site-header .header-ust .iletisim{
display: none;
}
.about-section-two .image-column .inner-column .image-box {
display: none;
}.about-section-two .image-column .inner-column .image-box .image {
max-width: 222px;
left: 38px;
top: 10px;
}.about-section-two .content-column .inner-column {
padding: 50px 20px;
}.hizmetler {
padding: 0px 0px 0px;
}.hizmetler .hizmetler-metin {
padding: 0 20px;
}.hizmetler .hizmetler-resim img {
height: 300px;
}.marine-counter-section{
display: none;
}.sss-section {
padding: 70px 0;
}.footer .footer-grid{
display: none;
}.footer{
padding-top: 0;
margin-bottom: 35px;
}.footer .footer-container{}
}