.home-hizmetler {
position: relative;
width: 100%;
background-color: #000000;
}/* --- 1. SABİT ARKA PLAN KATMANLARI --- */
.home-hizmetler .bg-layer {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
overflow: hidden;
}.home-hizmetler .bg-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1);
transition:
opacity 1s ease-in-out,
transform 5s ease-out;
}.home-hizmetler .bg-image.active {
opacity: 1;
transform: scale(1.05);
}.home-hizmetler .bg-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0) 100%
),
linear-gradient(
90deg,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.3) 45%,
rgba(0, 0, 0, 0) 100%
);
z-index: 2;
opacity: 50%;
}/* --- 2. KAYDIRILAN İÇERİK --- */
.home-hizmetler .scroll-content {
position: relative;
z-index: 3;
margin-top: -100vh;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
}/* --- 3. SOL TARAF (Sabit Alan) --- */
.home-hizmetler .left-col {
width: 45%;
position: relative;
}.home-hizmetler .sticky-wrapper {
position: sticky;
top: 15vh; /* Ekranın tam ortasına denk gelmesi için ayarlandı */
height: 70vh;
min-height: 450px;
}.home-hizmetler .text-container {
position: relative;
width: 100%;
height: 100%;
z-index: 9;
}.home-hizmetler .dynamic-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;/* YENİ YAPI: Yazı ve Buton Bloğunu Tam Ekran Ortasına Sabitler */
display: flex;
flex-direction: column;
justify-content: center; /* space-between yerine center kullanıldı */
gap: 40px; /* Buton ile yazı grubu arasındaki mesafe */opacity: 0;
visibility: hidden;
pointer-events: none;
}.home-hizmetler .dynamic-text.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}/* Yazı Çıkış Animasyonu */
.home-hizmetler .dynamic-text h5,
.home-hizmetler .dynamic-text h2,
.home-hizmetler .dynamic-text .btn-genel {
opacity: 0;
transform: translateY(-20px);
transition:
opacity 0.4s ease,
transform 0.4s ease;
}/* Yazı Giriş Animasyonu */
.home-hizmetler .dynamic-text.active h5,
.home-hizmetler .dynamic-text.active h2,
.home-hizmetler .dynamic-text.active .btn-genel {
opacity: 1;
transform: translateY(0);
transition:
opacity 0.6s ease,
transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}.home-hizmetler .dynamic-text.active h5 {
transition-delay: 0.1s;
}
.home-hizmetler .dynamic-text.active h2 {
transition-delay: 0.2s;
}
.home-hizmetler .dynamic-text.active .btn-genel {
transition-delay: 0.3s;
}/* Sol Tipografi Kuralları */
.home-hizmetler .dynamic-text h5 {
font-size: 15px;
font-weight: 700;
letter-spacing: 2px;
color: #df0000;
margin-bottom: 20px;
text-transform: uppercase;
}.home-hizmetler .dynamic-text h2 {
font-size: 35px;
font-weight: 800;
line-height: 1.15;
color: #ffffff;
margin-bottom: 80px;
text-transform: uppercase;
display: block;
}.home-hizmetler .dynamic-text p {
font-size: 15px;
font-weight: 400;
line-height: 1.15;
color: #ffffff;
margin-top: 40px;
margin-bottom: 0;
border-left: 2px solid #fff;
padding-left: 40px;
}/* --- 4. SAĞ TARAF --- */
.home-hizmetler .right-col {
width: 40%;
padding-top: 15vh;
padding-bottom: 35vh;
}.home-hizmetler .service-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 5px;
padding: 30px;
margin-bottom: 8vh;
opacity: 1;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}.home-hizmetler .service-card:last-child {
margin-bottom: 0;
}.home-hizmetler .service-card.active {
opacity: 1;
background: #df0000;
}.home-hizmetler .service-card .icon-box {
width: 60px;
height: 60px;
background: #f4f4f4;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
color: #2a2a2a;
border: solid 1px #dcdcdc;
transition: all 0.4s ease;
}.home-hizmetler .service-card .numara {
position: absolute;
right: 20px;
top: 25px;
font-size: 65px;
font-weight: 800;
opacity: 10%;
}.home-hizmetler .service-card.active .icon-box {
background: #f4f4f4;
color: #df0000;
}.home-hizmetler .service-card .icon-box svg {
width: 28px;
height: 28px;
}.home-hizmetler .service-card h3 {
font-size: 18px;
font-weight: 800;
color: #111827;
margin: 0 0 15px 0;
}.home-hizmetler .service-card p {
font-size: 15px;
color: #4b5563;
line-height: 1.4;
margin: 0;
font-weight: 500;
}.home-hizmetler .service-card.active h3 {
color: #fff;
}.home-hizmetler .service-card.active p {
color: #fff;
}/* --- 5. MOBİL UYUMLULUK --- */
@media (max-width: 991px) {
.home-hizmetler .scroll-content {
display: block;
padding-top: 60px;
}
.home-hizmetler .left-col {
width: 100%;
position: sticky;
top: 20px;
z-index: 10;
}.home-hizmetler .sticky-wrapper {
position: relative;
top: 0;
height: auto;
min-height: auto;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(10px);
padding: 30px 20px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}.home-hizmetler .text-container {
height: auto; /* Mobilde kendi yüksekliğini ayarlaması için auto yaptık */
}/* Mobilde gap değerini biraz azaltıyoruz */
.home-hizmetler .dynamic-text {
position: relative;
gap: 30px;
}.home-hizmetler .dynamic-text h2 {
font-size: 26px;
line-height: 1.2;
}
.home-hizmetler .dynamic-text h5 {
margin-bottom: 10px;
font-size: 13px;
}.home-hizmetler .right-col {
width: 100%;
padding-top: 40px;
padding-bottom: 10vh;
}
.home-hizmetler .service-card {
margin-bottom: 30px;
padding: 25px;
}
}/* Genel Kapsayıcı Ayarları */
.mgm-about-section {
width: 100%;
height: auto;
padding: 100px 0px;
color: #333;
}/* Üst Kısım Flex Düzeni */
.mgm-top-container {
display: flex;
align-items: center;
gap: 60px;
margin-bottom: 80px;
}/* Sol Taraf: Arkası Renkli Görsel Kutusu */
.mgm-image-wrapper {
flex: 1;
position: relative;
z-index: 1;
}/* Arkadaki Kutu - Yeni MGM Kırmızısı */
.mgm-image-wrapper::before {
content: "";
position: absolute;
top: -25px;
left: -25px;
width: 50%;
height: calc(100% + 50px);
background-color: #df0000; /* MGM Kırmızı */
z-index: -1;
border-radius: 4px;
}.mgm-image-wrapper img {
width: 100%;
height: 320px;
display: block;
border-radius: 2px;
}/* Sağ Taraf: Metin Alanı */
.mgm-text-wrapper {
flex: 1;
}.mgm-text-wrapper h2 {
font-size: 32px;
color: #df0000;
margin-bottom: 20px;
font-weight: 700;
}.mgm-text-wrapper p {
font-size: 15px;
line-height: 1.7;
color: #4a4a4a;
margin-bottom: 15px;
}/* Vurgulu Metin - Yeni MGM Kırmızısı */
.mgm-highlight {
font-weight: bold;
color: #df0000; /* MGM Kırmızı */
font-style: italic;
margin-top: 20px;
margin-bottom: 30px !important;
}/* Buton Stili - Yeni MGM Kırmızısı */
.mgm-btn {
display: inline-block;
padding: 12px 30px;
border: 2px solid #df0000; /* Kenarlık Kırmızı */
color: #df0000; /* Yazı Kırmızı */
text-decoration: none;
font-weight: 600;
border-radius: 50px;
transition: all 0.3s ease;
}.mgm-btn:hover {
background-color: #df0000; /* Hover (Üzerine gelince) Arka Plan Kırmızı */
color: #ffffff; /* Hover Yazı Rengi Beyaz */
}/* Alt Kısım: Hizmetler Grid Düzeni */
.mgm-services-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
padding-top: 25px;
padding-bottom: 25px;
}.mgm-service-box {
text-align: left;
border-left: 1px solid #eaeaea;
padding: 0px 40px;
}/* İkon Stilleri - Yeni MGM Kırmızısı */
.mgm-icon {
width: 45px;
height: 45px;
color: #df0000; /* MGM Kırmızı İkonlar */
margin-bottom: 20px;
}.mgm-icon svg {
width: 45px;
height: 45px;
}.mgm-service-box h3 {
font-size: 21px;
color: #df0000;
margin-bottom: 15px;
font-weight: 700;
}.mgm-service-box p {
font-size: 16px;
line-height: 1.4;
font-weight: 500;
margin-bottom: 0px;
}/* Mobil Uyumluluk (Responsive) */
@media (max-width: 992px) {
.mgm-top-container {
flex-direction: column;
gap: 40px;
}.mgm-image-wrapper {
width: 100%;
margin-left: 25px;
}.mgm-services-container {
grid-template-columns: repeat(2, 1fr);
}
}@media (max-width: 768px) {
.mgm-services-container {
grid-template-columns: 1fr;
gap: 30px;
}
}/***//* mgm-quote-section: Ana Kapsayıcı (Ekranı ikiye böler) */
.mgm-quote-section {
display: flex;
width: 100%;
min-height: 450px; /* Yüksekliği içeriğe göre esner */
background-color: #df0000; /* MGM Kırmızı */
overflow: hidden; /* Resmin dışarı taşmasını engeller */
}/* mgm-quote-left: Sol Kırmızı Alan */
.mgm-quote-left {
flex: 1; /* %50 genişlik alır */
background-color: #df0000;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 40px; /* İç boşluklar */
}.mgm-quote-left .btn-genel:hover {
background: transparent;
border-color: #fff;
}/* mgm-quote-content: Sol Alanın İçindeki Metin Kutusu */
.mgm-quote-content {
max-width: 500px; /* Metinlerin çok uzamasını engeller */
width: 100%;
}/* mgm-quote-title: Başlık */
.mgm-quote-title {
color: #ffffff; /* Beyaz metin */
font-size: 38px;
font-weight: 700;
margin-top: 0;
margin-bottom: 20px;
line-height: 1.2;
}/* mgm-quote-text: Alt Açıklama Yazısı */
.mgm-quote-text {
color: #ffffff;
font-size: 17px;
line-height: 1.5;
margin-bottom: 35px;
font-weight: 600;
}/* mgm-quote-btn: Beyaz Hap Tasarımlı Buton */
.mgm-quote-btn {
display: inline-block;
background-color: #ffffff; /* Beyaz arka plan */
color: #df0000; /* Kırmızı yazı */
padding: 14px 35px;
border-radius: 50px; /* Kenarları tam yuvarlak */
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease; /* Hover için yumuşak geçiş */
}/* mgm-quote-btn: Buton Üzerine Gelince (Hover) */
.mgm-quote-btn:hover {
background-color: #f8f8f8; /* Hafif grileşerek tıklanma hissi verir */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
transform: translateY(-2px); /* Çok hafif yukarı kalkar */
}/* mgm-quote-right: Sağ Görsel Alanı */
.mgm-quote-right {
flex: 1; /* %50 genişlik alır */
position: relative;
}/* mgm-quote-image: Sağ Alanın İçindeki Resim */
.mgm-quote-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Resmi ezmeden kutuyu tam kaplamasını sağlar */
}/* Mobil Uyumluluk (Responsive - Tablet ve Telefon) */
@media (max-width: 992px) {
.mgm-quote-section {
flex-direction: column; /* Mobilde alt alta dizer */
}.mgm-quote-left {
padding: 60px 20px;
text-align: center; /* Mobilde yazıları ortalar */
}.mgm-quote-content {
align-items: center;
}.mgm-quote-title {
font-size: 32px;
}.mgm-quote-right {
min-height: 350px; /* Mobilde görselin görünmesi için sabit yükseklik */
width: 100%;
}
}/**/.neden-biz2 {
position: relative;
padding: 70px 0 40px;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
color: #333333;
}.neden-biz2 .section-header {
text-align: center;
margin-bottom: 20px;
position: relative;
z-index: 30;
}.neden-biz2 .section-header h2 {
font-size: 38px;
font-weight: 800;
margin: 0 0 10px 0;
color: var(--text-dark);
}.neden-biz2 .section-header h2 b {
color: var(--mgm-red);
}.neden-biz2 .highlight {
color: #df0000;
}.neden-biz2 .section-header p {
color: #666;
font-size: 17px;
max-width: 600px;
margin: 0 auto;
font-weight: 500;
}.neden-biz2 .flight-arena {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
height: 450px;
}.neden-biz2 .flight-path-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}.neden-biz2 .path-bg {
fill: none;
stroke: #e0e0e0;
stroke-width: 2;
stroke-dasharray: 12, 12;
}.neden-biz2 .path-active {
fill: none;
stroke: #df0000;
stroke-width: 3;
stroke-linecap: round;
}.neden-biz2 .airplane {
position: absolute;
width: 45px;
height: 45px;
top: 50%;
left: -5%;
transform: translate(-50%, -50%);
z-index: 20;
color: #df0000;
filter: drop-shadow(0 5px 10px rgba(223, 0, 0, 0.4));
will-change: left, top, transform, opacity;
display: flex;
align-items: center;
justify-content: center;
}.neden-biz2 .airplane svg {
width: 100%;
height: 100%;
fill: currentColor;
display: block;
}.neden-biz2 .boxes-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
box-sizing: border-box;
z-index: 10;
}.neden-biz2 .info-box {
width: 30%;
background: #ffffff;
border-radius: 16px;
padding: 30px 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
opacity: 0;
transform: scale(0.8) translateY(20px);
}.neden-biz2 .info-box.active {
opacity: 1;
transform: scale(1) translateY(0) !important;
}.neden-biz2 .info-box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 4px;
background: #df0000;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
transition: width 0.6s ease 0.3s;
}.neden-biz2 .info-box.active::before {
width: 100%;
}.neden-biz2 .box-1 {
margin-top: 130px;
}.neden-biz2 .box-2 {
margin-top: -130px;
}.neden-biz2 .box-3 {
margin-top: 130px;
}.neden-biz2 .box-icon {
width: 60px;
height: 60px;
background: rgba(223, 0, 0, 0.1);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #df0000;
margin-bottom: 20px;
transition: transform 0.3s ease;
}.neden-biz2 .box-icon svg {
width: 30px;
height: 30px;
fill: #df0000;
}.neden-biz2 .info-box:hover .box-icon {
transform: scale(1.1) rotate(-5deg);
}.neden-biz2 .info-box h3 {
font-size: 1.4rem;
margin: 0 0 10px 0;
color: #222;
}.neden-biz2 .info-box p {
color: #666;
line-height: 1.4;
margin: 0;
font-size: 15px;
font-weight: 500;
}/* MOBİL UYUM */
@media (max-width: 900px) {
.neden-biz2 .boxes-wrapper {
flex-direction: column;
position: relative;
gap: 30px;
padding: 0 20px;
}.neden-biz2 .info-box {
width: 100%;
margin-top: 0 !important;
}.neden-biz2 .flight-arena {
height: auto;
}.neden-biz2 .flight-path-svg,
.neden-biz2 .airplane {
display: none;
}.neden-biz2 {
padding: 50px 0;
}
}/**/.main-wrapper-bg {
width: 100%;
height: auto;
padding: 70px 0px;
position: relative;
}.dunya-map {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
background-position: center;
background-size: contain !important;
background: url("../images/dunya.jpg");
}.main-wrapper {
display: grid;
width: 100%;
overflow: hidden;
position: relative;
z-index: 9;
}/* --- SOL TARAF: YORUMLAR (yorumlarSlider) --- */:root {
--red: #df0000;
--black: #111111;
--white: #ffffff;
--soft-bg: #f9f9f9;
}.yorumlarSlider-section {
padding: 0px 60px 0px 0px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}.yorumlarSlider-section .iconn {
position: absolute;
right: 80px;
top: 25px;
}.yorumlarSlider-section .iconn svg {
width: 90px;
height: 90px;
fill: #d0d0d0;
}.yorumlarSlider-badge {
color: var(--red);
font-weight: 800;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
display: block;
}.yorumlarSlider-title {
font-size: 38px;
font-weight: 800;
line-height: 1.1;
color: var(--black);
margin-bottom: 40px;
margin-top: 0px;
}.yorumlarSlider-container {
position: relative;
min-height: 200px;
border-radius: 5px;
padding: 45px;
background: #fff;
box-shadow: -3px -3px 15px #00000024;
}.yorumlarSlider-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
visibility: hidden;
transform: translateX(20px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}.yorumlarSlider-item.active {
position: relative;
/* Aktif olan alanı kaplar */
opacity: 1;
visibility: visible;
transform: translateX(0);
}.yorumlarSlider-stars {
color: #ffc107;
margin-bottom: 20px;
font-size: 14px;
}.yorumlarSlider-stars svg {
width: 13px;
height: 13px;
fill: #ffc107;
}.yorumlarSlider-text {
font-size: 18px;
line-height: 1.7;
color: #444;
margin-bottom: 25px;
font-weight: 500;
}.yorumlarSlider-author h4 {
font-size: 19px;
color: var(--black);
margin-bottom: 5px;
}.yorumlarSlider-author span {
color: var(--red);
font-size: 14px;
font-weight: 600;
}.yorumlarSlider-nav {
display: flex;
gap: 12px;
margin-top: 40px;
}.yorumlarSlider-btn {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid #eee;
background: white;
cursor: pointer;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
color: var(--black);
}.yorumlarSlider-btn svg {
width: 15px;
height: 15px;
}.yorumlarSlider-btn:hover {
background: var(--red);
color: white;
border-color: var(--red);
}.yorumlarSlider-btn:hover svg {
fill: white;
}/* --- SAĞ TARAF: GÖRSEL ÜZERİ SSS --- */
.sss-image-area {
width: 100%;
height: 100%;
position: relative;
background: var(--black);
border-radius: 5px;
overflow: hidden;
}.sss-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}.sss-overlay {
position: absolute;
inset: 0;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}.sss-overlay h3 {
color: var(--white);
font-size: 28px;
margin-bottom: 40px;
border-left: 5px solid var(--red);
padding-left: 15px;
margin-top: 0px;
display: flex;
align-items: center;
justify-content: space-between;
}.sss-overlay h3 a {
color: var(--white);
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #fff;
padding-bottom: 5px;
text-decoration: none;
line-height: 1;
}.sss-accordion-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
margin-bottom: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}.sss-header {
padding: 14px 25px;
cursor: pointer;
color: var(--white);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
font-size: 18px;
}.sss-header svg {
transition: 0.4s;
width: 14px;
height: 14px;
fill: #fff;
}.sss-accordion-item.active .sss-header svg {
transform: rotate(180deg);
}.sss-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
color: #ddd;
font-size: 14px;
}.sss-content p {
padding: 0 25px 20px 25px;
line-height: 1.5;
margin: 0px;
font-weight: 500;
font-size: 15px;
}.sss-accordion-item.active {
border-color: var(--red);
background: rgba(223, 0, 0, 0.15);
}.sss-accordion-item.active i {
transform: rotate(180deg);
color: var(--red);
}.sss-image-area .mgm-btn {
margin-top: 45px;
border-color: #fff;
color: #fff;
}.sss-image-area .mgm-btn:hover {
border-color: var(--red);
color: #fff;
}@media (max-width: 992px) {
.main-wrapper {
grid-template-columns: 1fr;
}.sss-image-area {
height: 450px;
}.yorumlarSlider-section {
padding: 40px;
}
}/**/:root {
--primary-color: #df0000;
/* Görseldeki bordo renk */
--bg-color: #f4f5f7;
/* Arka plan açık gri */
--card-bg: #ffffff;
--text-color: #333333;
}/* Ana Kapsayıcı */
.services-section22 {
text-align: center;
padding: 40px 20px;
width: 100%;
}/* Başlık (İsteğe bağlı, görselde üstte bir başlık var) */
.services-section22 h2 {
color: var(--primary-color);
font-size: 32px;
font-weight: 700;
margin-bottom: 40px;
}/* Kartların Dizilimi (Flexbox) */
.cards-container22 {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
/* Mobilde alt alta inmesi için */
}/* Tekil Kart Tasarımı */
.service-card22 {
background-color: var(--card-bg);
width: 240px;
height: 240px;
border-radius: 12px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
color: var(--text-color);
border: 1px solid #eaeaea;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
transition: all 0.3s ease;
cursor: pointer;
}/* Hover (Üzerine Gelme) Efekti */
.service-card22:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(139, 29, 65, 0.15);
border-color: rgba(139, 29, 65, 0.3);
}/* İkon Kapsayıcı */
.icon-wrapper22 {
margin-bottom: 20px;
color: var(--primary-color);
/* SVG'nin currentColor özelliğini besler */
display: flex;
justify-content: center;
align-items: center;
}/* SVG İkon Boyutları */
.icon-wrapper22 svg {
width: 64px;
height: 64px;
stroke-width: 1.5;
transition: transform 0.3s ease;
}.service-card22:hover .icon-wrapper svg {
transform: scale(1.1);
/* Üzerine gelince ikon hafif büyür */
}/* Kart Altındaki Metin */
.service-title22 {
font-size: 18px;
font-weight: 600;
margin: 0;
padding: 0 10px;
line-height: 1.4;
}/* Mobil Uyumluluk */
@media (max-width: 768px) {
.cards-container {
gap: 20px;
}.service-card22 {
width: 100%;
max-width: 280px;
height: 200px;
}.services-title22 {
font-size: 26px;
}
}/**//* ---- SADECE SAYAÇ ALANINA ÖZEL CSS ---- */
.about-stats-section {
--brand: #df0000;
--brand-light: rgba(223, 0, 0, 0.08);
--text-dark: #2a2a2a;
--text-muted: #64748b;
--card-bg: #ffffff;
width: 100%;
padding: 120px 20px;
box-sizing: border-box;
position: relative;
overflow: hidden;
/* Parallax resminin dışarı taşmasını engeller */
display: flex;
align-items: center;
justify-content: center;
}/* 1) Hareket Edecek Arka Plan Resmi */
.stats-bg-image {
position: absolute;
top: -20%;
/* Resim hareket edebilsin diye fazladan pay bırakıyoruz */
left: 0;
width: 100%;
height: 140%;
/* Hareket alanı için %100'den büyük */
background-image: url("../images/sayacbg.webp");
background-size: cover;
background-position: center;
z-index: 1;
/* JS tarafından transform ile hareket ettirilecek */
will-change: transform;
}/* 2) Resmin Üzerindeki Koyu/Bordo Filtre (Overlay) */
.stats-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: #0000005b;
}/* 3) İçerik Kapsayıcısı (Resmin ve filtrenin üstünde durması için z-index 3) */
.about-stats-container {
max-width: 1200px;
width: 100%;
position: relative;
z-index: 3;
}/* Üst Başlık Alanı (Arka plan koyu olduğu için renkler beyaza çevrildi) */
.stats-header {
text-align: center;
margin-bottom: 60px;
}.stats-subtitle {
color: #ffb3b3;
/* Kırmızı zemin üzerinde okunaklı tatlı bir pembe/kırmızı */
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
display: block;
margin-bottom: 12px;
}.stats-title {
color: #ffffff;
font-size: 42px;
font-weight: 800;
margin: 0;
letter-spacing: -0.5px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
/* Derinlik katar */
}/* Sayaç Kartları Izgarası (Grid) */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}/* Tekil Sayaç Kartı */
.stat-card {
background: var(--card-bg);
border-radius: 20px;
padding: 40px 24px;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}/* Kartın üstündeki gizli kırmızı çizgi */
.stat-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--brand);
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left;
}.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}.stat-card:hover::before {
transform: scaleX(1);
}/* İkon Tasarımı */
.stat-icon {
width: 70px;
height: 70px;
margin: 0 auto 24px auto;
background: var(--brand-light);
color: var(--brand);
border-radius: 50%;
/* Kare yerine yuvarlak daha modern durur */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}.stat-icon svg {
width: 32px;
height: 32px;
stroke-width: 1.5;
}.stat-card:hover .stat-icon {
background: var(--brand);
color: #ffffff;
transform: scale(1.1) rotate(10deg);
}/* Rakamlar */
.stat-number-wrapper {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 8px;
}.stat-number {
font-size: 48px;
font-weight: 800;
color: var(--text-dark);
line-height: 1;
transition: color 0.3s ease;
}.stat-card:hover .stat-number {
color: var(--brand);
}.stat-suffix {
font-size: 24px;
font-weight: 700;
color: var(--brand);
margin-left: 4px;
}/* Alt Başlık / Metin */
.stat-text {
font-size: 16px;
font-weight: 600;
color: var(--text-muted);
margin: 0;
transition: color 0.3s ease;
}.stat-card:hover .stat-text {
color: var(--text-dark);
}/* Mobil Uyumluluk */
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}@media (max-width: 576px) {
.about-stats-section {
padding: 80px 15px;
}.stats-grid {
grid-template-columns: 1fr;
gap: 20px;
}.stats-title {
font-size: 32px;
}.stat-card {
padding: 30px 20px;
}
}/**//* --- FOOTER GENEL AYARLAR --- */
.advanced-white-footer {
background-color: #ffffff; /* Ana Renk: Beyaz */
color: #333333;
border-top: 1px solid #eaeaea;
position: relative;
padding-top: 60px;
}.footer-container {
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: center;
gap: 40px;
}/* Sütun Yapısı */
.footer-col {
flex: 1;
}.info-col {
flex: 1.5; /* İlk sütun biraz daha geniş */
padding-right: 30px;
border-right: 1px solid #eaeaea; /* Görseldeki dikey ayırıcı çizgi */
}/* --- SOL SÜTUN (Bilgiler) --- */
.footer-logo {
max-width: 200px;
margin-bottom: 25px;
}.address-box {
font-size: 15px;
line-height: 1.5;
color: #555;
margin-bottom: 30px;
}.address-box a {
color: #555;
text-decoration: none;
transition: color 0.3s ease;
}.address-box a:hover {
color: #df0000; /* Vurgu Rengi */
}/* Sosyal İkonlar */
.social-links {
display: flex;
gap: 12px;
margin-bottom: 30px;
}.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid #d1d1d1;
border-radius: 50%;
color: #333;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
}.social-links a svg {
width: 18px;
height: 18px;
fill: #333;
}.social-links a:hover {
background-color: #df0000;
border-color: #df0000;
color: #ffffff;
transform: translateY(-3px); /* Hafif yukarı zıplama efekti */
}.social-links a:hover svg {
fill: #ffffff;
}.partner-logo {
max-width: 150px;
opacity: 0.8;
}/* --- ORTA SÜTUN (Linkler) --- */
.links-col {
padding: 0 20px;
}.footer-menu {
list-style: none;
padding: 0;
margin: 0;
}.footer-menu p {
margin-top: 0px;
margin-bottom: 6px;
}.footer-menu h2 {
margin: 0;
margin-bottom: 20px;
color: #df0000;
font-size: 20px;
font-weight: 800;
}.footer-menu h2::after {
content: "";
display: block;
width: 30px;
height: 2px;
background: #df0000;
margin-top: 10px;
}.footer-menu li {
margin-bottom: 7px;
}.footer-menu a {
color: #222;
text-decoration: none;
font-size: 15px;
font-weight: 500;
transition:
color 0.3s ease,
transform 0.3s ease;
display: inline-block;
}.footer-menu a:hover {
color: #df0000;
transform: translateX(5px);
}/* --- SAĞ SÜTUN (Widget) --- */
.widget-col {
flex: 1.2;
border-left: 1px solid rgb(234, 234, 234);
padding-left: 50px;
}.news-widget {
background-color: #f8f9fa; /* Beyaz üstünde hafif gri kutu */
border-top: 4px solid #df0000; /* Kırmızı şerit */
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
}.widget-header {
background-color: #fff;
padding: 15px 20px;
border-bottom: 1px solid #eaeaea;
}.widget-header h4 {
margin: 0;
font-size: 16px;
color: #df0000;
}.widget-content {
padding: 20px;
max-height: 300px;
overflow-y: auto; /* Kaydırma çubuğu */
}/* Kaydırma Çubuğu Özelleştirme */
.widget-content::-webkit-scrollbar {
width: 6px;
}
.widget-content::-webkit-scrollbar-track {
background: #f1f1f1;
}
.widget-content::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 10px;
}
.widget-content::-webkit-scrollbar-thumb:hover {
background: #df0000;
}.news-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px dashed #ddd;
}.news-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}.news-icon {
background-color: #333; /* Görseldeki lacivert/siyah ikon yuvarlağı */
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}.news-text {
display: flex;
flex-direction: column;
}.news-date {
font-size: 11px;
color: #df0000; /* Kırmızı Tarih */
font-weight: 600;
margin-bottom: 5px;
}.news-text a {
color: #444;
font-size: 13px;
text-decoration: none;
line-height: 1.5;
transition: color 0.3s;
}.news-text a:hover {
color: #df0000;
}/* --- ALT BİLGİ (Copyright) --- */
.footer-bottom {
background-color: #fcfcfc;
border-top: 1px solid #eaeaea;
margin-top: 50px;
padding: 20px 0;
}.footer-bottom img {
height: 20px;
width: auto;
}.bottom-container p {
margin: 0;
font-size: 14px;
color: #777;
font-weight: 500;
}/* --- YÜZEN BUTONLAR (Görseldeki sağ alt kırmızı butonlar) --- */
.floating-buttons {
position: absolute;
bottom: 20px;
right: 20px;
display: flex;
gap: 10px;
}.float-btn {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 10px rgba(223, 0, 0, 0.3);
transition: all 0.3s ease;
}.red-btn {
background-color: #df0000;
color: #ffffff;
}.red-btn:hover {
background-color: #b30000;
transform: translateY(-3px);
}/* --- MOBİL UYUM (Responsive) --- */
@media (max-width: 992px) {
.footer-container {
flex-direction: column;
gap: 40px;
}.info-col {
border-right: none;
border-bottom: 1px solid #eaeaea;
padding-right: 0;
padding-bottom: 30px;
}.links-col {
padding: 0;
}.floating-buttons {
position: fixed; /* Mobilde ekranda sabit kalsın */
z-index: 99;
}
}
/* GENEL KAPSAYICI */
.css-slider-wrapper {
width: 100%;
overflow: hidden;
/* Dışarı taşan resimleri gizle */
padding: 20px 0;
}/* MOBİL (Varsayılan): Kayan Yapı (Geçişli) */
.css-slider-track {
display: flex;
--visible-items: 2;
/* Mobilde ekranda aynı anda 2 tane görünsün */
/* Resim sayısına ve ekrandaki öğeye göre şeridin genişliğini otomatik hesaplar */
width: calc(100% * (var(--item-count) / var(--visible-items)));
animation: scroll-left 15s linear infinite;
/* 15 saniyede bir tam tur atar */
}.css-slide {
flex: 1;
/* Mobilde her bir logoya eşit genişlik verir */
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
}.css-slide img {
max-width: 100%;
max-height: 80px;
/* Mobilde logo büyüklüğü sınırlaması */
object-fit: contain;
}/* Kaydırma Animasyonu (Sadece Mobilde Çalışacak) */
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}/* MASAÜSTÜ (769px ve Üzeri): 6'lı Sabit Yapı (Kaymayacak) */
@media (min-width: 769px) {
.css-slider-track {
width: 100%;
/* Kayan şerit genişliğini iptal et */
animation: none !important;
/* Masaüstünde kayma animasyonunu DURDUR */
transform: none !important;
flex-wrap: wrap;
/* Eğer 6'dan fazla resim varsa alt satıra geçmesine izin ver */
justify-content: center;
/* Ortala */
gap: 20px 0;
/* Satırlar arasına boşluk */
}.css-slide {
/* Yan yana 6 tane sığması için %16.666 genişlik (100 / 6 = 16.666) veriyoruz */
flex: 0 0 16.666%;
max-width: 16.666%;
padding: 10px 15px;
}.css-slide img {
max-height: 100px;
/* Masaüstünde logolar biraz daha büyük olabilir */
}/* KOPYA LİSTEYİ GİZLE: Masaüstünde kayma olmadığı için kopyaya ihtiyaç yok */
.css-slide.clone {
display: none !important;
}
}/* ============================================================
MOBİL MODERNİZASYON VE ŞIKLAŞTIRMA (Max 768px)
============================================================ */@media (max-width: 768px) {
/* 1. Genel Bölüm Boşlukları */
.map-container-wrapper .header-overlay{
padding: 0;
}.cozum-ortaklari{
padding: 0 !important;
}
section, .home-hizmetler, .about-stats-section {
}/* 2. Hizmetler (Scrolling Content) Bölümü */
.home-hizmetler .scroll-content {
margin-top: 0 !important; /* Masaüstündeki negatif margin'i sıfırla */
padding: 0 10px;
}
.home-hizmetler .sticky-wrapper {
margin-bottom: 30px;
padding: 25px 20px !important;
text-align: center;
}.home-hizmetler .dynamic-text {
align-items: center; /* Buton ve yazıları ortala */
gap: 20px;
}.home-hizmetler .dynamic-text h2 {
font-size: 24px !important;
margin-bottom: 20px !important;
}.home-hizmetler .dynamic-text p {
padding-left: 0;
border-left: none;
border-top: 2px solid #df0000;
padding-top: 15px;
font-size: 14px;
}/* 3. Hakkımızda (About) Bölümü */
.mgm-top-container {
gap: 30px !important;
}.mgm-image-wrapper {
margin-left: 0 !important; /* Taşan margin'i kaldır */
}.mgm-image-wrapper::before {
width: 100px; /* Arka kırmızı kutuyu küçült ki taşmasın */
height: 100px;
top: -10px;
left: -10px;
}.mgm-text-wrapper {
text-align: center;
}.mgm-text-wrapper h2 {
font-size: 26px !important;
}.mgm-services-container {
grid-template-columns: 1fr !important; /* Mobilde tek sütun daha şık */
gap: 15px;
}.mgm-service-box {
border-left: none !important;
border-bottom: 1px solid #eaeaea;
padding: 20px 0 !important;
text-align: center;
}.mgm-icon {
margin: 0 auto 15px auto;
}/* 4. Teklif Al (Quote) Bölümü */
.mgm-quote-title {
font-size: 28px !important;
}.mgm-quote-left {
padding: 10px 20px 50px 20px !important;
}.mgm-quote-right {
min-height: 250px !important; /* Görsel alanını mobilde daralt */
}/* 5. Neden Biz (Uçak Efekti) */
.neden-biz2 .section-header h2 {
font-size: 28px !important;
}.neden-biz2 .info-box {
padding: 25px !important;
text-align: center;
}.neden-biz2 .box-icon {
margin: 0 auto 15px auto;
}/* 6. Yorumlar ve SSS Bölümü */
.yorumlarSlider-section {
padding: 30px 15px !important;
}.yorumlarSlider-title {
font-size: 28px !important;
text-align: center;
}.yorumlarSlider-container {
padding: 30px 20px !important;
}.yorumlarSlider-section .iconn {
display: none; /* Mobilde görsel kalabalığı kaldır */
}.sss-overlay {
padding: 30px 40px !important;
}.sss-header {
font-size: 16px !important;
padding: 12px 15px !important;
}/* 7. Sayaçlar (Stats) - 2x2 Izgara Yapısı */
.stats-grid {
grid-template-columns: repeat(2, 1fr) !important; /* Yan yana ikişerli */
gap: 15px !important;
}.stat-card {
padding: 20px 10px !important;
}.stat-number {
font-size: 32px !important;
}.stat-icon {
width: 50px !important;
height: 50px !important;
}.stat-icon svg {
width: 24px !important;
height: 24px !important;
}/* 8. Footer (Alt Kısım) */
.advanced-white-footer {
padding-top: 20px !important;
text-align: center;
}.main-wrapper-bg .container,
.main-wrapper-bg [class*="col-"]{
padding: 0;
}.yorumlarSlider-badge{
text-align: center;
}
.services-section22{
display: none;
}.footer-container {
gap: 30px !important;
display: none;
}.info-col {
padding-right: 0 !important;
border-right: none !important;
align-items: center;
display: flex;
flex-direction: column;
}.social-links {
justify-content: center;
}.widget-col {
border-left: none !important;
padding-left: 0 !important;
}.footer-menu h2::after {
margin: 10px auto !important; /* Alt çizgiyi ortala */
}.footer-bottom .bottom-container {
flex-direction: column;
gap: 15px;
text-align: center;
}
}/* Küçük Telefonlar İçin (iPhone SE vs) */
@media (max-width: 375px) {
.stat-number {
font-size: 26px !important;
}
.mgm-quote-title {
font-size: 22px !important;
}
}