.neden-biz {
width: 100%;
height: auto;
position: relative;
display: block;
padding: 70px 0px;
}.neden-biz .biz-liste {
width: 100%;
height: auto;
}.neden-biz .icon {
width: 100%;
height: auto;
margin-bottom: 22px;
display: block;
}.neden-biz .icon img {
width: auto;
height: 57px;
}.neden-biz .biz-text {
width: 100%;
height: auto;
color: #383838;
line-height: 1.55;
font-weight: 600;
font-size: 20px;
margin-bottom: 20px;
}.neden-biz .biz-p {
width: 100%;
height: auto;
font-family: var(--font-lora);
font-size: 17px;
color: #727272;
margin-bottom: 20px;
line-height: 1.7;
max-width: 350px;
min-height: 150px;
}.neden-biz .biz-numara {
width: 100%;
padding-top: 15px;
font-size: 15px;
height: auto;
color: #727272;
font-family: var(--font-lora);
border-top: 1px solid #eaeaea;
}/**/.hakkimizda {
width: 100%;
position: relative;
padding: 90px 0px 90px 0px;
background: #f5f5f5;
overflow: hidden;
}.hakkimizda .icon {
width: auto;
height: 35px;
margin-bottom: 30px;
position: relative;
z-index: 9;
}.hakkimizda h1 {
display: block;
width: 100%;
font-size: 50px;
font-weight: 700;
color: #383838;
position: relative;
z-index: 9;
}.hakkimizda h2 {
display: block;
width: 100%;
font-weight: 500;
font-family: var(--font-lora);
font-style: italic;
font-size: 20px;
letter-spacing: 0px;
margin-top: 0px;
position: relative;
z-index: 9;
color: #727272;
}.hakkimizda p {
display: block;
width: 100%;
font-weight: 400;
font-family: var(--font-lora);
padding-bottom: 25px;
line-height: 1.7;
position: relative;
z-index: 9;
color: #727272;
}.hakkimizda h2::after {
content: "";
position: relative;
width: 20px;
height: 0.8px;
background: #000;
margin-top: 30px;
margin-bottom: 30px;
display: block;
position: relative;
z-index: 9;
}.hakkimizda-bg {
position: absolute;
inset: 0; /* top:0 right:0 bottom:0 left:0 */
background-size: cover;
background-position: center;
will-change: transform; /* performans */
transform: translateY(0) !important; /* başlangıç */
transition: transform 0.08s linear; /* çok hafif smoothing */
}
.hakkimizda-right {
position: relative;
min-height: 750px;
}.hakkimizda .hakkimizda-bgg{
position: absolute;
width: 100%;
height: 100%;
background-position: center!important;
background-size: cover!important;
}/**//* Genel Kapsayıcı */
.hizmet-bolumu {
padding: 105px 0px 80px 0px;
background: #fff;
}/* Başlık Alanı */
.baslik-alani {
margin-bottom: 50px;
}.baslik-alani h2 {
font-weight: 800;
font-size: 34px;
color: #383838;
margin-bottom: 10px;
}.baslik-alani p {
font-family: var(--font-lora);
color: #777;
font-size: 17px;
line-height: 1.7;
}.baslik-alani .cizgi {
width: 40px;
height: 0.8px;
background: #000;
display: block;
}/* Filtre Menüsü */
.hizmet-filtre-menu {
text-align: center;
margin-bottom: 40px;
}
.hizmet-filtre-btn {
background: transparent;
border: none;
font-family: "Lora", serif;
font-style: italic;
color: #b0b0b0;
font-size: 16px;
padding: 5px 15px;
cursor: pointer;
position: relative;
outline: none;
transition: color 0.3s;
}
/* Slash İşareti */
.hizmet-filtre-btn:not(:last-child)::after {
content: "/";
position: absolute;
right: -4px;
color: #e0e0e0;
font-style: normal;
pointer-events: none;
}
/* Aktif Durum */
.hizmet-filtre-btn:hover,
.hizmet-filtre-btn.aktif {
color: #333;
font-weight: 700;
}
/* Çizgi Efekti */
.hizmet-filtre-btn[data-filter="*"]::before {
content: "";
display: inline-block;
width: 20px;
height: 1px;
background-color: #333;
vertical-align: middle;
margin-right: 10px;
opacity: 0;
transition: 0.3s;
}
.hizmet-filtre-btn[data-filter="*"].aktif::before {
opacity: 1;
}/* --- GALERİ GRID YAPISI --- */
.hizmet-galeri {
margin: 0 -15px; /* Yanlardan taşmayı dengelemek için */
}/* Grid Elemanı (4 Sütun) */
.hizmet-oge {
width: 25%; /* 4 Sütun */
float: left;
padding: 15px; /* Resimler arası boşluk */
box-sizing: border-box;
}/* İç Kutu (Siyah Arkaplan ve Hover için gerekli) */
.hizmet-kutu-ic {
position: relative;
overflow: hidden;
background-color: #000; /* Resim solunca alttan çıkacak siyah renk */
border-radius: 4px;
}/* Link Bloğu */
.hizmet-link {
display: block;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}/* Resim Ayarı */
.hizmet-link img {
display: block;
width: 100%;
height: auto;
transition: all 0.5s ease;
opacity: 1;
backface-visibility: hidden;
}/* HOVER EFEKTLERİ */
/* 1. Resim soluklaşsın ve büyüsün */
.hizmet-kutu-ic:hover img {
opacity: 0.4; /* Siyah arkaplanı ortaya çıkarır */
transform: scale(1.1);
}/* 2. Yazı ve İkon Kapsayıcısı */
.hizmet-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0; /* Başlangıçta gizli */
z-index: 2;
transition: all 0.4s ease;
}/* Kutuya hover olunca overlay görünsün */
.hizmet-kutu-ic:hover .hizmet-overlay {
opacity: 1;
}/* Yazı Stili ve Animasyonu */
.hizmet-overlay span {
color: #fff;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
transform: translateY(20px); /* Aşağıdan başlasın */
transition: all 0.4s ease;
}/* İkon Stili ve Animasyonu */
.hizmet-overlay svg {
stroke: #fff;
width: 24px;
height: 24px;
transform: translateY(30px); /* Yazıdan biraz daha aşağıdan gelsin */
transition: all 0.5s ease;
}/* Hover anında yukarı kayma */
.hizmet-kutu-ic:hover .hizmet-overlay span {
transform: translateY(0);
}
.hizmet-kutu-ic:hover .hizmet-overlay svg {
transform: translateY(0);
}/* RESPONSIVE */
@media (max-width: 991px) {
.hizmet-oge {
width: 50%;
} /* Tablette 2 sütun */
}
@media (max-width: 576px) {
.hizmet-oge {
width: 50%;
} /* Mobilde tek sütun */
.hizmet-filtre-btn {
display: block;
width: 50%;
padding: 10px 0;
}
.hizmet-filtre-btn::after {
display: none;
}
.hizmet-filtre-btn::before {
display: none !important;
}
}/* Load More */
.hizmet-load-more {
text-align: center;
margin-top: 50px;
}
.hizmet-load-more::after {
content: "";
width: 1px;
height: 25px;
background: #424242;
margin: 0px auto;
display: block;
margin-top: 25px;
}/*neden-biz2*/.neden-biz2 {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
background: #f8f8f8;
}.neden-biz2 .neden-biz2-sol {
position: relative;
}.neden-biz2 .neden-biz2-bg {
position: absolute;
width: 100%;
height: 100%;
object-position: center;
object-fit: cover;
background-size: cover;
}.neden-biz2 .neden-biz2-sag {
width: 100%;
height: auto;
padding: 105px 200px 50px 60px;
}.neden-biz2 .neden-biz2-sag .neden-biz2-text {
width: 100%;
height: auto;
max-width: 450px;
padding: 0px 15px;
}.neden-biz2 .neden-biz2-sag .neden-biz2-text .liste {
width: 100%;
height: auto;
display: flex;
padding-bottom: 55px;
}.neden-biz2 .neden-biz2-sag .neden-biz2-text .liste .icon {
width: 42px;
position: absolute;
}.neden-biz2 .neden-biz2-sag .neden-biz2-text .liste .icon svg {
width: 40px;
height: auto;
overflow: inherit;
fill: #000;
}.neden-biz2 .neden-biz2-sag .neden-biz2-text .liste .icon img {
width: 100%;
height: auto;
}.neden-biz2 .neden-biz2-sag .neden-biz2-text .liste .text {
width: auto;
margin-left: 42px;
padding-left: 45px;
}.neden-biz2 .neden-biz2-sag .neden-biz2-text .liste .text h2 {
display: block;
font-size: 19px;
font-weight: 600;
letter-spacing: 0px;
text-transform: none;
color: #383838;
margin-bottom: 16px;
}.neden-biz2 .neden-biz2-sag .neden-biz2-text .liste .text p {
line-height: 1.7;
font-size: 15px;
font-family: var(--font-lora);
color: #727272;
}/**//* --- KADRO GENEL ALAN --- */
.kadro-bolumu {
padding: 120px 0px 120px 0px;
background: #fff;
}.kadro-wrapper {
margin: 0 -15px; /* Yan boşlukları dengelemek için */
}/* Clearfix (Yüzdürme hatasını önler) */
.kadro-wrapper::after {
content: "";
display: table;
clear: both;
}/* --- TEKİL KADRO ELEMANI (4 Sütun) --- */
.kadro-uye {
width: 33%; /* 4 Sütun */
float: left;
padding: 15px;
box-sizing: border-box;
}/* --- RESİM ALANI (Efektin Olduğu Yer) --- */
.kadro-resim-kutu {
width: 100%;
height: 268px;
position: relative;
overflow: hidden;
background-color: #000; /* Resim solunca alttan çıkacak siyah renk */
margin-bottom: 20px; /* Resim ile İsim arasındaki boşluk */
cursor: pointer;
}.kadro-resim-kutu img {
display: block;
width: 100%;
object-fit: cover;
height: 100%; /* Otomatik yükseklik */
transition: all 0.5s ease;
backface-visibility: hidden;
}/* HOVER: Resim Efekti */
.kadro-uye:hover .kadro-resim-kutu img {
opacity: 0.4; /* Resim kararır */
transform: scale(1.1); /* Resim büyür */
}/* --- OVERLAY (İkon/Yazı Alanı) --- */
.kadro-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 0; /* Başlangıçta gizli */
z-index: 2;
transition: all 0.4s ease;
}/* Hover olunca görünür yap */
.kadro-uye:hover .kadro-overlay {
opacity: 1;
}/* Overlay İçindeki İkon/Yazı Animasyonu */
.kadro-overlay svg,
.kadro-overlay span {
color: #fff;
stroke: #fff;
transform: translateY(30px); /* Aşağıdan başlasın */
transition: all 0.4s ease;
}.kadro-overlay span {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 10px;
}.kadro-uye:hover .kadro-overlay svg,
.kadro-uye:hover .kadro-overlay span {
transform: translateY(0); /* Yerine gelsin */
}/* --- ALTTAKİ YAZI ALANI (İsim & Unvan) --- */
.kadro-bilgi {
text-align: left; /* Sola dayalı (Resimdeki gibi) */
}.kadro-isim {
padding-top: 37px;
font-size: 18px;
font-weight: 600;
color: #333;
margin: 0 0 8px;
letter-spacing: 0.5px;
}.kadro-unvan {
font-family: var(--font-lora);
color: #888;
font-size: 15px;
margin: 0;
margin-bottom: 8px;
letter-spacing: 0.2px;
}/* --- RESPONSIVE (Mobil/Tablet) --- */
@media (max-width: 991px) {
.kadro-uye {
width: 50%;
} /* Tablette 2'li */
}
@media (max-width: 576px) {
.kadro-uye {
width: 100%;
} /* Mobilde tekli */
.kadro-bilgi {
text-align: center;
} /* Mobilde ortalansın */
}/**//* --- GENEL EFEKT YAPISI (Reusable Class) --- */
.efekt-kapsayici {
position: relative;
overflow: hidden; /* Resim taşarsa gizle */
z-index: 1;
}.efekt-resim {
top: 0px;
position: absolute;
z-index: -1; /* İçeriğin arkasında kalsın */
pointer-events: none; /* Tıklamayı engellemesin */
will-change: transform; /* Performans artırır */
/* Başlangıç pozisyonunu aşağıda JS ile güncelleyeceğiz ama varsayılan da dursun */
}/* --- BLOG TASARIMI --- */
.blog-section {
padding: 80px 0;
background-color: #f9f9f9; /* Hafif gri zemin */
}/* Çiçeğin Blog içindeki özel konumu */
.cicekbg {
right: -350px; /* Sağdan konum */
width: 120%; /* Resim boyutu */
height: 120%;
}/* Mobil düzeltmesi: Çizgi başlığın yanındaysa */
@media (min-width: 992px) {
.blog-desc {
border-top: none;
border-left: 1px solid #ddd;
padding-top: 0;
padding-left: 30px;
margin-top: 0;
}
}.blog-alt {
margin-top: 70px;
}/* Kartlar */
.blog-card {
text-decoration: none;
color: #000;
display: block;
background: #fff;
padding: 40px 30px;
border-bottom: 2px solid #333; /* Alt siyah çizgi */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
transition: transform 0.3s ease;
}
.blog-card:hover {
transform: translateY(-5px);
}.blog-card h4 {
font-weight: 600;
font-size: 20px;
color: #343434;
margin-bottom: 20px;
line-height: 1.4;
}
.blog-card p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 30px;
font-family: var(--font-lora);
color: #727272;
}/* Meta Bilgiler */
.blog-meta {
font-family: var(--font-lora);
font-size: 13px;
color: #999;
font-style: italic;
border-top: 1px solid #eee;
padding-top: 15px;
padding-bottom: 0px;
}
.blog-meta span {
margin-right: 10px;
}/* Footer & Buton */
.blog-footer {
text-align: center;
margin-top: 10px;
position: relative;
}
/* Dikey Çizgi */
.vertical-line {
display: block;
width: 1px;
height: 40px;
background: #ccc;
margin: 0 auto 30px;
}.btn-read-all {
display: inline-block;
background: #2d2d2d;
color: #fff;
padding: 15px 40px;
border-radius: 30px;
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
transition: 0.3s;
}
.btn-read-all:hover {
background: #000;
color: #fff;
}/**/.referanslar {
padding: 110px 0;
background: #fff;
}.referanslar-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
align-items: center;
justify-items: center;
}.referanslar-grid img {
max-width: 100%;
height: auto;
object-fit: contain;
}/* Mobil için 2 sütun */
@media (max-width: 768px) {
.referanslar-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
}/**//* Ana Yorumlar Kapsayıcısı */
.yorumlar {
position: relative;
width: 100%;
height: auto;
background-size: cover;
background-position: center;
padding: 80px 0 30px 0;
display: flex;
align-items: center;
justify-content: center;
color: #f0f0f0;
overflow: hidden;
background-position: center;
background-size: cover;
background-attachment: fixed; /* işte burada sabit yapıyoruz */
}.yorumlar:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
background: linear-gradient(270deg, #0000008c, transparent);
z-index: 1;
height: 100%;
}
/* Dekoratif Lamba */
.yorumlar .yorum-lamp {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
pointer-events: none;
}/* İçerik Alanı */
.testimonial-content {
position: relative;
z-index: 2;
width: 100%;
}/* Başlık ve Navigasyon */
.testimonial-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 36px;
}.testimonial-header h2 {
font-size: 34px;
font-weight: 700;
color: #ffffff;
}/* Navigasyon Okları */.yorum_slider_navigasyon {
display: flex;
}
.yorum_slider_navigasyon button {
border: none;
background: transparent;
width: 30px;
height: 40px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
margin-left: 10px;
}.yorum_slider_navigasyon button:hover {
}.yorum_slider_navigasyon svg {
width: 23px;
height: 23px;
fill: #ffffff;
}/* ---- YORUM SLIDER CSS'İ (YENİ CLASS İSİMLERİ) ---- *//* 1. Slaytları Gösteren "Pencere" */
.yorum_slider {
position: relative;
overflow: hidden;
}/* 2. Slaytları yan yana tutan ve hareket eden konteyner */
.yorum_slider_icerik {
display: flex;
transition: transform 0.6s ease-in-out;
}/* 3. Her bir slaytın kendisi */
.yorum_slider_oge {
width: 100%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 20px;
height: 100%;
transition: all 0.3s ease;
position: relative;
min-height: 260px;
display: flex;
align-items: center;
justify-content: center;
}.yorum_slider_oge .quote {
font-size: 21px;
line-height: 1.6;
font-style: italic;
margin-bottom: 30px;
color: #e0e0e0;
font-weight: 400;
font-family: var(--font-lora);
}.yorum_slider_oge .quote::before {
content: "“";
font-size: 30px;
margin-right: 5px;
color: rgba(255, 255, 255, 0.5);
}/* Yorum Sahibi Bilgileri */
.author-info {
display: flex;
align-items: center;
}.author-info img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
margin-right: 20px;
border: 2px solid rgba(255, 255, 255, 0.5);
}.author-info .author-name {
font-size: 18px;
font-weight: 700;
color: #ffffff;
}
.author-info .author-title {
font-size: 17px;
color: #c0c0c0;
margin-top: 10px;
}/* Mobil Cihazlar için Ayarlamalar */
@media (max-width: 992px) {
.yorumlar .floor-lamp {
opacity: 0.3;
left: -50px;
height: 70%;
}
.testimonial-content {
width: 90%;
margin: 0 auto;
}
}@media (max-width: 1200px) {
.yorumlar {
padding: 40px 20px;
min-height: auto;
background-attachment: local;
}
.yorumlar .floor-lamp {
display: none;
}
.testimonial-content {
width: 100%;
}
.testimonial-header {
flex-direction: column;
gap: 20px;
text-align: center;
margin-bottom: 30px;
}
.testimonial-header h2 {
font-size: 32px;
}
.yorum_slider_oge .quote {
font-size: 16px;
}.neden-biz2 .neden-biz2-sag {
width: 100%;
height: auto;
padding: 75px 25px 25px 25px;
}
.hizmet-bolumu {
padding: 50px 0px 50px 0px;
background: #fff;
}
.kadro-bolumu {
padding: 50px 0px;
}
}@media (max-width: 768px) {
.hs-slider-item {
min-width: 100%;
}
}
/**//* TÜM CSS KURALLARI .footer İLE BAŞLAR */.footer {
background-color: #232323; /* Görseldeki koyu gri ton */
color: #bababa;
line-height: 1.7;
font-size: 16px;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}.footer * {
box-sizing: border-box;
}/* Serif yazı tipleri (Görseldeki paragraf ve link fontu) */
.footer .serif-text {
color: #bababa;
font-family: var(--font-lora);
}.footer .footer-container {
margin: 0 auto;
padding: 80px 20px 60px 20px;
display: flex;
flex-wrap: wrap;
gap: 40px;
}.footer .footer-col {
flex: 1;
min-width: 250px; /* Mobilde alt alta geçmesi için */
}/* Başlıklar */
.footer .footer-logo {
color: #ffffff;
font-size: 18px;
letter-spacing: 3px;
margin-top: 0;
margin-bottom: 30px;
font-weight: 700;
height: 120px;
}.footer h3.footer-heading {
color: #ffffff;
font-size: 18px;
margin-top: 0;
margin-bottom: 30px;
font-weight: 700;
}.footer p {
margin-top: 0;
margin-bottom: 15px;
}/* 2. Sütun: Recent Posts Linkleri */
.footer .footer-links {
list-style: none;
padding: 0;
margin: 0;
}.footer .footer-links li {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}.footer .footer-links li::before {
content: "›";
margin-right: 12px;
color: #a0a0a0;
font-size: 15px;
font-family: sans-serif;
line-height: 1.5;
}.footer .footer-links a {
text-decoration: none;
transition: color 0.3s ease;
}.footer .footer-links a:hover {
color: #ffffff;
}/* 3. Sütun: Recent Works (Resimler ve Hover Efekti) */
.footer .footer-works {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px; /* Resimler arası boşluk */
max-width: 83%;
}.footer .work-item {
position: relative;
display: block;
aspect-ratio: 1 / 1; /* Tam kare olması için */
overflow: hidden;
background-color: #333;
}.footer .work-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}/* --- Kararma ve İkon Efekti Başlangıcı --- */
.footer .work-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.65); /* Siyah karartma (şeffaf) */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}.footer .work-item:hover .work-overlay {
opacity: 1; /* Mouse gelince görünür yap */
}.footer .work-overlay svg {
width: 24px;
height: 24px;
/* İkonun aşağıdan yukarı hafifçe gelmesi için ufak bir animasyon dokunuşu */
transform: translateY(10px);
transition: transform 0.3s ease;
}.footer .work-item:hover .work-overlay svg {
transform: translateY(0); /* Mouse gelince ikon yerine otursun */
}
/* --- Kararma ve İkon Efekti Sonu --- *//* 4. Sütun: İletişim */
.footer .contact-info p {
margin-bottom: 12px;
}/* Sosyal Medya İkonları */
.footer .footer-socials {
display: flex;
gap: 18px;
margin-top: 35px;
}.footer .footer-socials li {
list-style: none;
}.footer .footer-socials a {
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease;
}.footer .footer-socials a:hover {
color: #aaaaaa;
}.footer .footer-socials a svg {
fill: #ffffff;
width: 15px;
height: 15px;
}/* En Alt Kısım (Copyright) */
.footer .footer-bottom {
background-color: #1e1e1e; /* Alt bar biraz daha koyu */
text-align: center;
padding: 30px 20px;
}.footer .footer-bottom p {
margin: 0;
font-size: 13px;
}/**/.hs-slider-main {
position: relative;
width: 100%;
margin: 40px auto;
padding: 0 80px;
box-sizing: border-box;
overflow: hidden;
}.hs-slider-viewport {
overflow: hidden;
cursor: grab;
}.hs-slider-viewport:active {
cursor: grabbing;
}.hs-slider-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
will-change: transform;
justify-content: center;
}.hs-slider-item {
flex: 0 0 20%; /* Masaüstü 5'li (100 / 5) */
padding: 10px;
box-sizing: border-box;
}.hs-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease;
}.hs-card:hover {
transform: translateY(-5px);
}.hs-card img {
width: 100%;
display: block;
height: 140px;
object-fit: contain;
padding: 20px 10px;
}/* Navigasyon Okları */
.hs-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
border: 1px solid #ddd;
color: var(--hs-primary);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}.hs-nav:hover {
background: transparent;
color: #000;
border-color: black;
}.hs-prev {
left: 5px;
}
.hs-next {
right: 5px;
}/* Noktalar */
.hs-dots {
display: none;
justify-content: center;
gap: 8px;
margin-top: 25px;
}.hs-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: 0.3s;
}.hs-dot.active {
background: var(--hs-primary);
width: 20px;
border-radius: 10px;
}.hero {
display: flex;
min-height: 560px;
flex-wrap: wrap;
}.hero-left {
flex: 1;
background: url(../images/half-bg-dark.jpg);
background-position: center!important;
background-size: cover !important;
color: white;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 60px 0;
}
.hero-right {
flex: 1;
background-color: #f7f7f7;
color: #333;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 60px 0;
}/* Hero içindeki içeriklerin container ile hizalanması için */
.hero-left .hero-content {
width: 100%;
max-width: 615px;
padding: 50px 110px 0px 20px;
}.hero-right .hero-content {
width: 100%;
max-width: 615px;
padding: 0 0px 0px 100px;
}.feature-item {
margin-bottom: 60px;
}
.feature-item h3 {
margin-bottom: 10px;
font-weight: 700;
font-size: 21px;
text-transform: none;
}.feature-item p {
color: #aaa;
margin-top: 0;
font-family: var(--font-lora);
margin-bottom: 20px;
font-size: inherit;
line-height: 1.7;
}.hero-right h1 {
line-height: 1.1;
margin-bottom: 30px;
font-weight: 700;
font-size: 36px;
letter-spacing: 0px;
text-transform: none;
}.hero-right h2 {
line-height: 1.1;
margin-bottom: 30px;
font-weight: 700;
font-size: 36px;
letter-spacing: 0px;
text-transform: none;
}.hero-right p {
font-family: var(--font-lora);
color: #666;
line-height: 1.7;
margin-top: 0;
margin-bottom: 20px;
font-size: 17px;
font-weight: 400;
}.btn-quote {
border: none;
font-weight: 700;
letter-spacing: 2px;
cursor: pointer;
transition: 0.3s;
margin-top: 15px;
font-size: 12px;
color: #ffffff;
padding: 15px 28px 15px 28px;
border-radius: 3px;
background: #232323;
}.btn-quote:hover {
background: #000;
}/* İSTATİSTİK BÖLÜMÜ */
.stats-section {
background: url(../images/bg-dark.jpg) center;
background-size: cover;
padding: 130px 0px 100px 0px;
color: white;
text-align: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.stat-box h2 {
font-size: 49px;
font-weight: 700;
margin-bottom: 25px;
}
.stat-box span {
color: #888;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}/* ALT METİN BÖLÜMÜ */
.info-section {
padding: 120px 0;
background: #fff;
}
.info-flex {
display: flex;
gap: 80px;
align-items: flex-start;
}
.info-title {
flex: 1;
}
.info-title h2 {
font-size: 32px;
font-weight: 700;
line-height: 1.3;
}
.info-title .line {
width: 50px;
height: 1px;
background: #ddd;
margin-top: 30px;
}
.info-text {
flex: 2;
color: #999;
font-size: 18px;
line-height: 1.8;
}
.info-text p {
font-family: var(--font-lora);
}
/* MOBIL UYUMLULUK (RESPONSIVE) */
@media (max-width: 992px) {
.hero-left,
.hero-right {
flex: 100%;
justify-content: center;
text-align: center;
}
.hero-content {
max-width: 100%;
}
.hero-right h1 {
font-size: 36px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.info-flex {
flex-direction: column;
gap: 40px;
}
}@media(max-width:1024px){
.hero-left{
padding: 210px 0;
}.hero-right {
padding: 60px 20px;
}
.hizmet-filtre-menu {
text-align: center;
margin-bottom: 40px;
display: flex;
flex-wrap: wrap;
}
.hs-slider-viewport {
overflow: visible;
cursor: grab;
}
}