/* ================================================ */
/* == BÜTÜN CSS AYARLAMALARI BU BÖLÜMDEDİR == */
/* ================================================ */.odeme-agi-bolumu {
background-color: #fff;
color: var(--renk4); /* Koyu mavi-gri yazı rengi */
padding: 100px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
position: relative;
font-family: var(--font1);
}.odeme-agi-bolumu-baslik {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 80px;
margin-top: 0px;
}.odeme-agi-bolumu-timeline {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1100px;
position: relative;
}/* --- Her bir adımı tutan ana eleman --- */
.odeme-agi-bolumu-node {
width: 250px;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
/* Değiştirildi: Hafif bir kenarlıkla alan belli edildi */
border: solid 1px #e4ecf0;
border-radius: 50%;
justify-content: center;
}/* --- Daire --- */
.odeme-agi-bolumu-circle {
width: 60px;
height: 60px;
/* Değiştirildi: Ana renk maviye çevrildi */
background-color: var(--renk1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: absolute;
transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
color: #fff;
transform: translateY(-50px);
}.odeme-agi-bolumu-label {
margin-top: 65px;
/* Değiştirildi: Pasif yazı rengi ayarlandı */
color: #6b7280;
font-size: 1rem;
transition:
color 0.4s ease,
opacity 0.4s ease;
max-width: 70%;
font-weight: bold;
}/* --- Aktif olmayan durum için ikon --- */
.odeme-agi-bolumu-inactive-icon {
opacity: 1;
transition: opacity 0.3s ease;
}
.odeme-agi-bolumu-inactive-icon svg {
width: 28px;
height: 28px;
/* Değiştirildi: Mavi daire içinde ikon beyaz olacak */
stroke: #ffffff;
}/* --- Aktif Dairenin İçeriği --- */
.odeme-agi-bolumu-content {
position: absolute;
opacity: 0;
transform: scale(0.8);
transition:
opacity 0.4s ease 0.2s,
transform 0.4s ease 0.2s;
pointer-events: none;
/* Değiştirildi: İçerik rengi beyaz olacak */
color: #ffffff;
}.odeme-agi-bolumu-content .icon {
width: 48px;
height: 48px;
margin-bottom: 10px;
/* Değiştirildi: Aktif ikon rengi beyaz olacak */
stroke: #ffffff;
}
.odeme-agi-bolumu-content h3 {
font-size: 15px;
margin: 0;
font-weight: 600;
max-width: 71%;
margin: 0 auto;
}
.odeme-agi-bolumu-content p {
font-size: 14px;
/* Değiştirildi: Alt metin rengi ayarlandı */
color: rgba(255, 255, 255, 0.8);
max-width: 71%;
margin: 0px auto;
margin-top: 8px;
display: block;
font-family: var(--font2);
font-weight: 300;
line-height: 1.3;
}/* --- AKTİF DURUM STİLLERİ --- */
.odeme-agi-bolumu-node.active {
/* Aktif olunca kenarlık kalksın */
border-color: transparent;
}
.odeme-agi-bolumu-node.active .odeme-agi-bolumu-circle {
width: 100%;
height: 100%;
transform: translateY(0px);
}
.odeme-agi-bolumu-node.active .odeme-agi-bolumu-label {
opacity: 0;
}
.odeme-agi-bolumu-node.active .odeme-agi-bolumu-inactive-icon {
opacity: 0;
}
.odeme-agi-bolumu-node.active .odeme-agi-bolumu-content {
opacity: 1;
transform: scale(1);
pointer-events: all;
}.odeme-agi-bolumu-node.active .odeme-agi-bolumu-content svg{
fill: white;
}
/* --- Buton ve Logo --- */
.cta-button {
margin-top: 50px;
/* Değiştirildi: Buton rengi ve gölgesi maviye uyarlandı */
background-color: var(--renk1);
color: #ffffff;
border: none;
padding: 15px 35px;
border-radius: 50px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font1);
border: solid 2px transparent;
}.cta-button:hover {
background-color: transparent; /* Daha koyu mavi */
transform: translateY(-2px);
border-color: var(--renk1);
color: var(--renk1);
}.odeme-agi-bolumu-footer-logo {
position: absolute;
bottom: 30px;
left: 30px;
opacity: 0.7;
}
.odeme-agi-bolumu-footer-logo svg {
width: 24px;
/* Değiştirildi: Logo rengi koyu yapıldı */
fill: #1e293b;
}/* --- Mobil Uyumluluk --- */
@media (max-width: 768px) {
.odeme-agi-bolumu {
padding: 60px 15px;
}
.odeme-agi-bolumu-baslik {
font-size: 1.8rem;
margin-bottom: 60px;
}
.odeme-agi-bolumu-timeline {
flex-direction: column;
gap: 20px; /* Mobil'de aralığı biraz azalttık */
}
.odeme-agi-bolumu-timeline::before {
display: none;
}
.odeme-agi-bolumu-node {
width: 200px; /* Mobil'de biraz daha küçük */
height: 200px;
}
.odeme-agi-bolumu-label {
margin-top: 55px;
}
.odeme-agi-bolumu-circle {
transform: translateY(-40px);
}
.odeme-agi-bolumu-cta-button {
margin-top: 60px;
}
.odeme-agi-bolumu-footer-logo {
display: none;
}
}/*hakkimizda*/.hakkimizda {
width: 100%;
height: auto;
position: relative;
z-index: 9;
}.hakkimizda .hakkimizda-text {
width: 100%;
height: auto;
}.hakkimizda .hakkimizda-text small {
width: 100%;
height: auto;
font-size: 15px;
display: block;
border-left: 2px solid var(--renk1);
padding-left: 10px;
line-height: 1;
color: var(--renk1);
}.hakkimizda .hakkimizda-text h2 {
width: 100%;
height: auto;
font-family: var(--font1);
font-size: 40px;
margin-top: 20px;
}.hakkimizda .hakkimizda-text p {
width: 100%;
height: auto;
font-size: 17px;
font-weight: 400;
padding-bottom: 0px;
margin-bottom: 0px;
}.hakkimizda .hakkimizda-content {
width: 100%;
height: auto;
position: relative;
background: var(--renk2);
padding: 80px 40px;
border-radius: 30px;
}.hakkimizda .hakkimizda-content .maddeler {
width: 100%;
height: auto;
position: relative;
border-top: 1px solid #cedde7;
padding-top: 30px;
margin-top: 30px;
margin-bottom: 50px;
font-family: var(--font1);
display: block;
}.hakkimizda .hakkimizda-content .maddeler ul {
padding: 0px;
margin: 0px;
}.hakkimizda .hakkimizda-content .maddeler ul li {
list-style: none;
position: relative;
padding-left: 36px;
margin-bottom: 10px;
font-weight: bold;
font-size: 16px;
}.hakkimizda .hakkimizda-content .maddeler ul li::before {
content: "";
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background-position: 4.5px 5px !important;
background: var(--renk1);
border-radius: 50%;
background-repeat: no-repeat;
background-size: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}.hakkimizda .hakkimizda-content .hakkimizda-resim {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 30px;
}.hakkimizda .hakkimizda-content .hakkimizda-resim img {
width: 100%;
height: 100%;
object-fit: cover;
}/* Mevcut CSS'e eklenecekler */.hakkimizda-resim-container {
position: relative;
width: 100%;
height: 100%;
}.hakkimizda .hakkimizda-content .hakkimizda-resim {
width: 100%;
height: 100%;
min-height: 450px; /* Resmin çok küçülmemesi için */
overflow: hidden;
border-radius: 30px;
}/* Sayaç Kutusu Ana Tasarımı */
.hakkimizda-stats {
position: absolute;
bottom: -30px; /* Resmin biraz dışına taşması için */
left: 50%;
transform: translateX(-50%);
width: 90%;
background: #fff;
display: flex;
justify-content: space-around;
align-items: center;
padding: 30px 20px;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
z-index: 10;
}.stat-item {
display: flex;
align-items: center;
gap: 15px;
}.stat-icon {
color: var(--renk1); /* Sizin turuncu renginiz */
display: flex;
align-items: center;
}.stat-icon svg {
width: 35px;
height: 35px;
stroke: var(--renk1);
}.stat-text h3 {
margin: 0;
padding: 0;
font-size: 28px;
font-weight: 800;
color: #1a2b3c; /* Koyu lacivert/siyah tonu */
font-family: var(--font1);
line-height: 1;
}.stat-text h3 span {
font-size: 18px;
color: #1a2b3c;
margin-left: 2px;
}.stat-text p {
margin: 5px 0 0 0 !important;
padding: 0 !important;
font-size: 14px !important;
color: #666;
white-space: nowrap;
}/* Mobil Uyumluluk */
@media (max-width: 991px) {
.hakkimizda-stats {
position: relative;
bottom: 0;
left: 0;
transform: none;
width: 100%;
margin-top: 30px;
flex-wrap: wrap;
gap: 20px;
}
.stat-item {
width: 100%;
justify-content: center;
}
}/*hizmetler-genel*/.hizmetler-genel {
width: 100%;
height: auto;
position: relative;
margin-top: -50px;
padding: 0px 20px;
}.hizmetler-genel-ic {
background: var(--renk1);
min-height: 500px;
padding: 120px 0px 80px;
border-radius: 30px;
position: relative;
}.hizmetler-genel-ic .container {
position: relative;
z-index: 2;
}.hizmetler-genel .bg {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background: url("../images/bg1.webp");
position: absolute;
background-size: cover !important;
background-position: center !important;
}/* --- BAŞLIK --- */
.section-header {
text-align: center;
margin-bottom: 50px;
}.section-header h2 {
font-size: 40px;
color: #fff;
margin-bottom: 10px;
font-family: var(--font1);
}.section-header p {
color: #fff;
font-size: 1.1rem;
}.section-header.text-black h2 {
color: var(--renk4);
margin-top: 0px !important;
}.section-header.text-black p {
color: var(--renk4) !important;
}/* --- SWIPER / SLIDER ALANI --- */
.swiper {
width: 100%;
padding: 20px 10px 50px 10px; /* Alt boşluk pagination için */
}/* --- KART TASARIMI (Aynı Şıklıkta) --- */
.service-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
height: 100%; /* Eşit yükseklik */
display: flex;
flex-direction: column;
user-select: none;
font-family: var(--font1);
}/* Kart Hover Efekti */
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}/* Resim Alanı */
.card-image {
width: 100%;
height: 220px;
overflow: hidden;
}.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}.service-card:hover .card-image img {
transform: scale(1.1); /* Zoom efekti */
}/* Kart İçeriği */
.card-content {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}.card-category {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--renk1);
font-weight: 700;
margin-bottom: 10px;
}.card-content h3 {
font-size: 19px;
color: var(--renk4);
margin-top: 0px;
margin-bottom: 25px;
font-weight: 700;
line-height: 1.2;
display: block;
}.card-content p {
font-size: 0.95rem;
color: #666;
line-height: 1.4;
margin-top: 0px;
margin-bottom: 20px;
}/* Buton */
.read-more {
margin-top: auto;
text-decoration: none;
color: #2c3e50;
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
transition: 0.3s;
background: var(--renk2);
padding: 12px 20px;
border-radius: 10px;
}.read-more svg {
margin-left: auto;
width: 25px;
height: 25px;
fill: #2c3e50;
transition: transform 0.3s ease;
}.read-more:hover {
background: var(--renk1);
color: #fff;
}.read-more:hover svg {
transform: translateX(5px);
fill: #fff;
}/* --- SWIPER OKLARI ÖZELLEŞTİRME --- */
.swiper-button-next,
.swiper-button-prev {
color: #2c3e50 !important;
background: #fff;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease;
}.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 15px !important;
font-weight: bold;
}.swiper-button-next:hover,
.swiper-button-prev:hover {
background: #2c3e50 !important;
color: #fff !important;
}/* Pagination (Alt Noktalar) */
.swiper-pagination-bullet-active {
background-color: #fff !important;
}/**/.yorumlar {
width: 100%;
height: auto;
padding: 80px 20px;
position: relative;
}.saction-buttons {
display: flex;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
}.yorumlar .yorumlar-ic {
width: 100%;
background-color: var(--renk2);
padding: 80px 20px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 30px;
margin: 20px auto;
}/* --- SWIPER YAPISI --- */
.testimonial-slider {
width: 100%;
padding: 20px 10px 60px 10px; /* Alt padding pagination için */
position: relative;
}/* --- YORUM KARTI TASARIMI --- */
.review-card {
background: #fff;
border-radius: 30px; /* Görseldeki gibi geniş oval köşeler */
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* Çok hafif gölge */
height: 100%; /* Eşit yükseklik */
display: flex;
flex-direction: column;
justify-content: space-between;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
user-select: none;
}.review-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}/* Tırnak İşareti */
.quote-icon {
font-size: 2rem;
fill: var(--renk4);
margin-bottom: 20px;
width: 30px;
height: 30px;
}/* Yorum Metni */
.review-text {
font-size: 16px;
color: var(--renk4);
line-height: 1.4;
margin-bottom: 30px;
flex-grow: 1;
margin-top: 0px;
}/* Kullanıcı Bilgisi */
.user-info {
display: flex;
align-items: center;
gap: 15px;
border-top: 1px solid #eee;
padding-top: 20px;
}.user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
background: #cedde7;
color: #fff;
font-family: var(--font1);
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}.user-details h4 {
font-size: 0.95rem;
color: var(--renk4);
font-weight: 700;
margin-top: 2px;
margin-bottom: 2px;
text-transform: uppercase;
}.user-details span {
font-size: 0.85rem;
color: #888;
}
.user-details .puan {
width: 100%;
}
.user-details .puan svg {
fill: #f2d701;
width: 15px;
height: 15px;
}
/* --- ALT AKSİYON BUTONLARI --- */
.action-buttons {
display: flex;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
justify-content: center;
}.btn {
text-decoration: none;
padding: 15px 35px;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}/* Yorum Yaz Butonu (Primary) */
.btn-primary {
background-color: #1a1a1a;
color: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}.btn-primary:hover {
background-color: #2ecc71; /* Yeşil hover */
transform: translateY(-2px);
}/* Tüm Yorumlar Butonu (Secondary/Outline) */
.btn-outline {
background-color: transparent;
border: 2px solid #1a1a1a;
color: #1a1a1a;
}.btn-outline:hover {
background-color: #1a1a1a;
color: #fff;
transform: translateY(-2px);
}/* Mobil Düzenleme */
@media (max-width: 768px) {
.header-area h2 {
font-size: 2rem;
}
.review-card {
padding: 30px;
}
/* Mobilde okları gizle, sadece kaydırma kalsın */
.swiper-button-next,
.swiper-button-prev {
display: none;
}
}.swiper-pagination {
position: relative !important;
text-align: center;
transition: 0.3s opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
margin-top: 30px;
}/**//* GENEL */
.sss-section {
padding: 0;
font-family: var(--font1);
}.sss-container {
max-width: 1200px;
margin: auto;
display: flex;
gap: 30px;
align-items: flex-start;
}/* SOL */
.sss-left {
flex: 0 0 50%;
}.sss-sticky {
position: sticky;
top: 20px;
}.sss-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}.sss-card h3 {
margin-top: 0;
}.sss-btn {
width: 100%;
border: none;
padding: 12px;
border-radius: 8px;
background: #0d6efd;
color: white;
cursor: pointer;
font-size: 14px;
}.sss-btn:hover {
background: #0b5ed7;
}/* SAĞ */
.sss-right {
flex: 1;
}/* ACCORDION */
.sss-accordion {
display: flex;
flex-direction: column;
gap: 10px;
}.sss-item {
background: var(--renk2);
border-radius: 10px;
overflow: hidden;
padding: 25px 20px 25px 20px;
}.sss-header {
width: 100%;
border: none;
padding: 0px;
text-align: left;
font-size: 15px;
cursor: pointer;
position: relative;
background: transparent;
font-family: var(--font1);
font-weight: bold;
}.sss-header::after {
content: "+";
position: absolute;
right: 15px;
font-size: 18px;
width: 32px;
height: 32px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
top: -9px;
}.sss-item.active .sss-header::after {
content: "−";
}.sss-body {
max-height: 0;
overflow: hidden;
padding: 0 0 0 0;
font-size: 14px;
color: #555;
transition: all 0.3s ease;
font-family: var(--font2);
}.sss-item.active .sss-body {
max-height: 200px;
padding: 15px 0 0 0;
border-top: solid 1px #00000024;
margin-top: 20px;
color: black;
opacity: 50%;
font-weight: 300;
}/* RESPONSIVE */
@media (max-width: 992px) {
.sss-container {
flex-direction: column;
}.sss-left {
flex: 1;
}.sss-sticky {
position: relative;
top: 0;
}
}.sss-left2 {
min-width: 300px; /* Çok daralmasın */
max-width: 450px;
display: block;
}/* Üst Küçük Başlık */
.sss-subtitle {
font-size: 0.85rem;
color: var(--renk1); /* Yeşilimsi ton */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 15px;
display: block;
}/* Ana Başlık */
.sss-left h2 {
font-size: 3rem;
color: #1a1a1a;
line-height: 1.2;
margin-top: 0;
margin-bottom: 40px;
}/* İletişim Kutusu (Yeşil Alan) */
.contact-box {
background-color: #f7f7f7; /* Görseldeki soft yeşil */
padding: 40px;
border-radius: 30px; /* Yumuşak köşeler */
position: relative;
}.contact-box p {
font-size: 1.2rem;
color: #1a1a1a;
font-weight: 500;
line-height: 1.5;
margin-bottom: 30px;
}/* Telefon Butonu */
.phone-btn {
display: inline-flex;
align-items: center;
background-color: #fff;
padding: 10px 25px 10px 10px;
border-radius: 50px;
text-decoration: none;
color: #1a1a1a;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}.phone-btn:hover {
transform: translateY(-3px);
}.icon-circle {
width: 40px;
height: 40px;
background-color: var(--renk1); /* Sarı ikon zemini */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
color: #1a1a1a;
}.icon-circle svg{
fill: #fff;
width: 16px;
height: 16px;
}/**//* Ana Blog Konteyneri */
.blog {
max-width: 1330px;
margin: 90px auto;
padding: 0 20px;
}/* Başlık Alanı */
.blog-header {
font-family: var(--font1);
text-align: left;
margin-bottom: 40px;
}.pre-title {
color: var(--renk1); /* Yeşil renk */
font-weight: 600;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 10px;
position: relative;
display: inline-block;
}/* Yeşil çizgileri eklemek için */
.pre-title::after {
content: "//";
color: var(--renk1);
margin-left: 8px;
font-weight: 400;
display: none;
}.blog-header h1 {
font-size: 40px;
font-weight: 700;
margin: 0;
color: #2d332d;
}/* Kartların Izgara Yapısı */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 sütunlu yapı */
gap: 30px; /* Kartlar arası boşluk */
}/* Tekil Blog Kartı */
.blog-card {
background-color: #fff; /* Kartlar beyaz olacak */
border-radius: 24px; /* Yuvarlak köşeler */
overflow: hidden; /* Taşan görseli gizle */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}.blog-card:hover {
transform: translateY(-8px); /* Üzerine gelince hafifçe yukarı kalksın */
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}.card-image img {
width: 100%;
height: 250px;
object-fit: cover; /* Resmin oranını bozmadan alanı kaplamasını sağlar */
display: block;
}.card-content {
font-family: var(--font1);
padding: 25px;
}.card-content .category {
color: var(--renk1);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
margin-bottom: 10px;
}.card-content h2 {
margin: 0;
font-size: 22px;
font-weight: 600;
line-height: 1.4;
}/* Mobil ve Tablet için Duyarlılık (Responsive) Ayarları *//* Tablet (Örnek: 992px altı) */
@media (max-width: 992px) {
.blog-grid {
grid-template-columns: repeat(2, 1fr); /* 2 sütuna düşür */
}
.blog-header h1 {
font-size: 40px;
}
}/* Mobil (Örnek: 768px altı) */
@media (max-width: 768px) {
.blog-grid {
grid-template-columns: 1fr; /* Tek sütuna düşür */
}
.blog-header h1 {
font-size: 32px;
}
}/* GALERİ BÖLÜMÜ CSS */
.galeri-bolumu {
padding: 0 0 80px 0;
background-color: #fff;
}/* Grid Yapısı - Bento Style Karışımı */
.galeri-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 250px;
gap: 20px;
}.galeri-item {
position: relative;
border-radius: 24px; /* Sitenizdeki kartlarla aynı ovallik */
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}/* Bazı resimleri büyük yaparak şık bir görünüm sağlıyoruz (Masonry havası) */
.galeri-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.galeri-item:nth-child(6) { grid-column: span 2; }.galeri-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: block;
}/* Hover Efekti */
.galeri-link {
display: block;
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}.galeri-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #25496fb5; /* var(--renk1) tonu */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.4s ease;
}.overlay-icon {
transform: translateY(20px);
transition: transform 0.4s ease;
}.galeri-item:hover img {
transform: scale(1.1);
}.galeri-item:hover .galeri-overlay {
opacity: 1;
}.galeri-item:hover .overlay-icon {
transform: translateY(0);
}/* Mobil Uyumluluk */
@media (max-width: 1024px) {
.odeme-agi-bolumu{
display: none;
}
.galeri-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
}
.galeri-item:nth-child(1),
.galeri-item:nth-child(6) {
grid-column: span 1;
grid-row: span 1;
}
}@media (max-width: 768px) {
.galeri-bolumu {
padding: 40px 10px;
}
.galeri-grid {
grid-template-columns: 1fr;
grid-auto-rows: 250px;
}
.galeri-header h1 {
font-size: 32px;
}
}/**/.footer-social-links {
list-style-type: none;
display: flex;
gap: 10px;
padding: 0;
margin: 0;
margin-top: 0;
margin-left: 30px;
}.footer-social-links a {
text-decoration: none;
background-color: var(--renk1);
width: 30px;
height: 30px;
border: 2px solid var(--renk1);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
}.footer-social-links a svg {
height: 15px;
width: 15px;
fill: #ffffff;
line-height: 1.2;
transition: 0.3s ease;
}@media(max-width: 1024px) {
.iletisim4 .about_list a, .iletisim4 .about_list p {
color: black !important;
text-decoration: none !important;
}.footer-bottom {
margin-bottom: 40px !important;
}
}/**/
.site-footer {
font-family: var(--font1);
background-color: #f7f7f7;
padding: 70px 0 30px;
}.site-footer .maps{
border: solid 10px white;
border-radius: 10px;
}.site-footer .maps iframe{
height: 100%;
}.footer-container {
width: 100%;
box-sizing: border-box;
}.footer-main {
display: grid;
grid-template-columns: 2fr 2fr 2fr 1.7fr;
gap: 40px;
margin-bottom: 60px;
}/* Her bir sütun için genel stil */
.footer-column .column-title {
font-size: 14px;
font-weight: 700;
color: #2c303b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 0px;
margin-bottom: 25px;
}.footer-column .link-list {
list-style: none;
padding: 0;
margin: 0;
}.footer-column .link-list li {
margin-bottom: 15px;
}.footer-column .link-list a {
text-decoration: none;
color: #000;
font-size: 15px;
transition: color 0.3s ease;
}.footer-column .link-list a:hover {
color: var(--renk1);
}/* İletişim Bilgileri Sütunu */
.contact-info .phone-number {
font-size: 28px;
font-weight: 700;
color: var(--renk1);
text-decoration: none;
display: block;
margin-bottom: 0;
}.contact-info .phone-note {
font-size: 13px;
margin-bottom: 25px;
margin: 10px 0;
}.contact-info .address {
font-size: 14px;
line-height: 1.6;
margin-bottom: 25px;
}.social-icons {
display: flex;
gap: 15px;
}.social-icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: var(--renk1);
border-radius: 50%;
color: #fff;
transition: transform 0.3s ease, background-color 0.3s ease;
}.social-icon:hover {
transform: scale(1.1);
}.social-icon svg {
width: 20px;
height: 20px;
fill: #fff;
}.location-picker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: var(--color-black-main);
margin-bottom: 20px;
cursor: pointer;
}.location-picker svg {
width: 18px;
height: 18px;
}.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid #e9ecef;
font-size: 14px;
}.footer-bottom a {
text-decoration: none;
color: #5a697d;
transition: color 0.3s ease;
}.footer-bottom a:hover {
color: var(--renk1);
}.hasem-logo {
margin-left: auto;
}.hasem-logo img {
width: auto;
height: 25px;
}.destek-hizmetleri {
width: 100%;
padding: 60px 0px;
background-color: #10439f;
position: relative;
}/**//* MODERN FOOTER STİLLERİ */
.site-footer-modern {
background-color: #111827; /* Çok koyu lacivert/siyah */
color: #e5e7eb;
padding: 80px 0 30px;
font-family: var(--font1);
position: relative;
overflow: hidden;
}/* Arkaplana hafif bir desen */
.site-footer-modern::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
background-size: 40px 40px;
pointer-events: none;
}.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 40px;
position: relative;
z-index: 1;
}.footer-col .footer-logo h3 {
color: #fff;
font-size: 24px;
margin-bottom: 20px;
font-weight: 800;
}.footer-desc {
font-size: 15px;
line-height: 1.6;
color: #9ca3af;
margin-bottom: 25px;
}.col-title {
color: #fff;
font-size: 18px;
font-weight: 700;
margin-bottom: 30px;
position: relative;
padding-bottom: 10px;
padding-left: 0;
}.col-title::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 40px; height: 3px;
background-color: var(--renk1);
border-radius: 2px;
}.footer-links {
list-style: none;
padding: 0; margin: 0;
}.footer-links li {
margin-bottom: 12px;
}.footer-links a {
color: #9ca3af;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
font-size: 15px;
}.footer-links a:hover {
color: var(--renk1);
transform: translateX(5px);
}/* İletişim Item */
.contact-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
}.c-icon {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.05);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--renk1);
flex-shrink: 0;
}.c-text span {
display: block;
font-size: 12px;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 1px;
}.c-text a, .c-text p {
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 15px;
margin: 0;
}/* Alt Bar */
.footer-bottom-modern {
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.1);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}.copyright {
font-size: 14px;
color: #6b7280;
}.copyright strong {
color: #9ca3af;
}/* MOBİL UYUMLULUK */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}.col-title::after {
left: 50%;
transform: translateX(-50%);
}.contact-item {
flex-direction: column;
align-items: center;
gap: 8px;
}.footer-social {
justify-content: center;
}.footer-bottom-modern {
flex-direction: column;
gap: 20px;
text-align: center;
}
.site-footer-modern {
margin-bottom: 50px;
padding: 40px 20px 80px; /* Mobilde alt menü butonları varsa diye extra boşluk */
}
}/* ================================================ */
/* == MODERN MOBİL OPTİMİZASYON BLOĞU == */
/* ================================================ */@media (max-width: 768px) {
/* Genel Başlık Standartları */
h1, h2, .odeme-agi-bolumu-baslik, .section-header h2, .sss-left h2, .blog-header h1 {
font-size: 1.8rem !important;
line-height: 1.2 !important;
margin-bottom: 30px !important;
}/* 1. Ödeme Ağı Bölümü - Daireleri küçültüp hizalama */
.odeme-agi-bolumu {
padding: 60px 15px !important;
}
.odeme-agi-bolumu-node {
width: 180px !important;
height: 180px !important;
margin-bottom: 40px;
}
.odeme-agi-bolumu-circle {
transform: translateY(-30px) !important;
}
.odeme-agi-bolumu-label {
font-size: 0.9rem !important;
margin-top: 45px !important;
}
.odeme-agi-bolumu-content h3 {
font-size: 14px !important;
}
.odeme-agi-bolumu-content p {
font-size: 12px !important;
max-width: 85% !important;
}/* 2. Hakkımızda Stats - 2x2 Izgara Görünümü */
.hakkimizda-stats {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
padding: 25px 15px !important;
width: 100% !important;
transform: none !important;
position: relative !important;
bottom: 0 !important;
margin-top: 50px !important;
}
.stat-item {
flex-direction: column !important;
text-align: center !important;
gap: 8px !important;
}
.stat-text h3 {
font-size: 22px !important;
}/* 3. Hizmetler Kartları */
.hizmetler-genel-ic {
padding: 80px 0px 40px !important;
}
.service-card {
margin: 0 5px;
}
.card-image {
height: 180px !important;
}/* 4. Yorumlar - Daha kompakt kartlar */
.yorumlar {
padding: 40px 10px !important;
}
.review-card {
padding: 25px !important;
border-radius: 20px !important;
}
.review-text {
font-size: 14px !important;
}
.btn {
width: 100%; /* Mobilde butonlar tam genişlik */
justify-content: center;
}/* 5. SSS (FAQ) Bölümü */
.sss-left h2 {
text-align: center;
}
.contact-box {
padding: 25px !important;
text-align: center;
}
.phone-btn {
width: 100%;
justify-content: flex-start;
}
.sss-header {
font-size: 14px !important;
padding-right: 40px !important; /* Artı butonuna çarpmaması için */
}/* 6. Blog ve Galeri - Modern Gap Ayarı */
.blog {
margin: 40px auto !important;
}
.blog-grid, .galeri-grid {
gap: 15px !important;
}
.blog-card {
border-radius: 18px !important;
}
.card-content h2 {
font-size: 24px !important;
margin: 0 !important;
}.sss-header::after{
right: 5px;
}/* 7. Footer Modern Dokunuş */
.site-footer-modern {
padding: 50px 20px 30px !important;
}
.footer-grid {
gap: 30px !important;
}
.col-title {
margin-bottom: 20px !important;
font-size: 16px !important;
}
.contact-item {
text-align: left !important;
flex-direction: row !important; /* İkon ve metin yanyana kalsın */
align-items: flex-start !important;
}
.footer-bottom-modern {
margin-top: 0;
padding-top: 0;
border-top: none;
}
}/* Küçük Telefonlar İçin (iPhone SE vb.) */
@media (max-width: 380px) {
.hakkimizda-stats {
grid-template-columns: 1fr !important; /* Tek sütuna düşür */
}
.odeme-agi-bolumu-node {
width: 150px !important;
height: 150px !important;
}
.odeme-agi-bolumu-content h3 {
font-size: 12px !important;
}
}@media(max-width:1024px){
.hakkimizda .hakkimizda-content {
padding: 40px 20px;
margin-top: 30px;
}.next-hizmet,
.prev-hizmet{
display: none;
}.swiper-button-next, .swiper-button-prev {
top: var(--swiper-navigation-top-offset, 30%) !important;
}.hakkimizda .hakkimizda-content .hakkimizda-resim{
display: none;
}
}@media(max-width:1024px){
.sss-left2{
padding-top: 50px;
}.galeri-bolumu{
display: none;
}.sss-section {
padding: 0 20px;
}.sss-left h2 {
text-align: left;
padding: 0 60px 0px 0;
}.yorumlar{
display: none;
}.footer-col {
display: none;
}
}