a.WhatsApp1 {
display: flex;
font-size: 18px;
background: #2EB843;
font-weight: 600;
width: 51px;
height: 51px;
position: fixed;
bottom: 20px;
left: 20px;
border-radius: 50%;
-webkit-transition: all .1s ease-out 0s;
-moz-transition: all .1s ease-out 0s;
-ms-transition: all .1s ease-out 0s;
-o-transition: all .1s ease-out 0s;
transition: all .1s ease-out 0s;
color: #fff;
align-items: center;
justify-content: center;
animation: whatsapp infinite 2s linear;
z-index: 9999
}a.WhatsApp1 svg {
width: 24px;
height: 24px;
fill: white;
}@keyframes whatsapp {
0% {
box-shadow: 0 0 0 0 #2EB843
}50% {
box-shadow: 0 0 0 10px #015dc700
}100% {
box-shadow: 0 0 0 0 #015dc700
}
}@media(max-width:1024px){
a.WhatsApp1 {
bottom: 60px
}}
/* 1. GENEL AYARLAR VE KONTEYNER */
.hakkimizda-v3 {
padding: 140px 0;
background-color: white; /* Çok hafif gri, temiz görünüm */
position: relative;
overflow: visible;
}.h-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: center;
position: relative;
}/* 2. SOL METİN KUTUSU */
.h-text-box {
grid-column: 1 / 7;
grid-row: 1;
background: #ffffff;
padding: 80px 80px 80px 0;
z-index: 5;
position: relative;
/* Box shadow kaldırıldı, temiz mimari duruş için lineer kesim */
}/* Slider'dan gelen marka şekli */
.h-text-box .sh-brand-shape {
width: 50px;
height: 60px;
background-color: #4da6c8;
transform: skewX(-20deg);
margin-bottom: 30px;
}.h-text-box h2.h-title {
font-size: 48px;
font-weight: 800;
color: #101c38; /* Slider başlık rengi */
line-height: 1.1;
margin-bottom: 35px;
letter-spacing: -1.5px;
text-transform: uppercase;
}.h-desc-content p {
font-size: 18px;
line-height: 1.7;
color: #555;
margin-bottom: 40px;
max-width: 480px;
font-weight: 300;
}/* Modern Link Stili */
.h-main-link {
display: inline-flex;
align-items: center;
gap: 12px;
color: #006ea5;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
border-bottom: 2px solid #e2e8f0;
padding-bottom: 5px;
}.h-main-link:hover {
color: #101c38;
border-bottom-color: #4da6c8;
}.h-main-link svg {
transition: transform 0.3s ease;
}.h-main-link:hover svg {
transform: translateX(5px);
}/* 3. SAĞ GÖRSEL ALANI */
.h-media {
grid-column: 6 / 13;
grid-row: 1;
z-index: 1;
}.h-image-wrapper {
width: 100%;
height: 650px;
overflow: hidden;
position: relative;
}.h-image-wrapper img.main-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}.h-media:hover img.main-img {
transform: scale(1.08);
}/* 4. FLOATING CTA (KİT KUTUSU) */
.h-kit-overlay {
position: absolute;
bottom: -60px;
right: 5%;
width: 380px;
background: #101c38; /* Slider'daki koyu lacivert */
color: #fff;
z-index: 10;
padding: 40px;
box-shadow: 20px 20px 60px rgba(16, 28, 56, 0.2);
}.kit-inner {
position: relative;
}.kit-icon-bg {
position: absolute;
top: -100px;
right: -20px;
width: 150px;
pointer-events: none;
display: none;
}.floating-icon {
width: 100%;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
animation: float 4s ease-in-out infinite;
}@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}.kit-text h4 {
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
color: #4da6c8; /* Açık mavi vurgu */
}.kit-text p {
font-size: 15px;
line-height: 1.5;
opacity: 0.8;
margin-bottom: 25px;
}.kit-action-btn {
display: inline-block;
background: #fff;
color: #101c38;
padding: 12px 30px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
border-radius: 50px;
transition: all 0.3s ease;
}.kit-action-btn:hover {
background: #4da6c8;
color: #fff;
}/* 5. RESPONSIVE (MOBIL) */
@media (max-width: 1024px) {
.h-container {
display: flex;
flex-direction: column;
}
.h-text-box {
padding: 40px 0px;
grid-column: 1 / 13;
text-align: center;
}
.h-text-box .sh-brand-shape {
margin: 0 auto 20px auto;
}
.h-desc-content p {
margin: 0 auto 30px auto;
}.h-media {
display: none;
width: 100%;
margin-top: 20px;
}.h-image-wrapper {
height: 400px;
}.h-kit-overlay {
position: relative;
width: 100%;
display: none;
right: 0;
bottom: 0;
margin-top: -40px;
}
.kit-icon-bg {
top: -80px;
width: 100px;
}
}/**/:root {
--gap: 20px;
--item-width: 320px;
}.urunlerimiz {
padding: 60px 0;
background: #fff;
overflow: hidden;
}.section-title {
padding-left: 50px;
font-weight: 300;
font-size: 28px;
margin-bottom: 30px;
text-transform: uppercase;
}.slider-wrapper {
width: 100%;
cursor: grab;
overflow: hidden;
position: relative;
}.slider-wrapper:active {
cursor: grabbing;
}.slider-track {
display: flex;
gap: var(--gap);
will-change: transform;
user-select: none;
padding-left: 50px; /* Başlangıç boşluğu */
}.slide-item {
flex: 0 0 var(--item-width);
position: relative;
aspect-ratio: 4/5;
}.slide-item img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none; /* Mobilde ve webde takılmayı önler */
}.overlay {
position: absolute;
top: 40px;
left: 30px;
color: white;
}.overlay .line {
display: block;
width: 45px;
height: 2px;
background: #fff;
margin-bottom: 10px;
}.overlay h3 {
margin: 0;
font-size: 18px;
letter-spacing: 1px;
}@media (max-width: 768px) {
:root { --item-width: 260px; }
.section-title { padding-left: 20px; font-size: 20px; }
.slider-track { padding-left: 20px; }
}/**/.neden-biz {
/* Arka plana şık bir mimari görsel koyabilirsin */
background: url('../images/nedenbiz.jpg');
background-size: cover;
background-position: center;
padding: 120px 0;
position: relative;
overflow: hidden;
}/* Önceki bölümlerle uyumlu degrade geçiş */
.neden-biz::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, #f8f9fa 40%, rgb(248 249 250 / 22%) 60%, rgba(248, 249, 250, 0) 100%);
z-index: 1;
opacity: 90%;
}.neden-biz .nb-container {
position: relative;
z-index: 2;
max-width: 700px; /* İçeriği solda tutmak için */
}/* Badge (Slider'daki alt başlık tarzında) */
.neden-biz .nb-badge {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: #006ea5;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 25px;
}.neden-biz .nb-dot {
width: 12px;
height: 12px;
background-color: #4da6c8;
transform: skewX(-20deg); /* Marka şekliyle uyumlu mini dot */
}/* Başlık */
.neden-biz .nb-main-title {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
color: #101c38;
margin-bottom: 25px;
letter-spacing: -1.5px;
}.neden-biz .nb-description {
font-size: 18px;
color: #555;
margin-bottom: 45px;
line-height: 1.6;
font-weight: 300;
}/* Özellikler Izgarası */
.neden-biz .nb-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 50px;
}.neden-biz .nb-feature-item {
display: flex;
flex-direction: column;
gap: 15px;
}.neden-biz .nb-icon-box {
background-color: #101c38;
width: 54px;
height: 54px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: all 0.3s ease;
}.neden-biz .nb-feature-item:hover .nb-icon-box {
background-color: #4da6c8;
transform: translateY(-5px);
}.neden-biz .nb-icon-box svg {
width: 28px;
height: 28px;
}.neden-biz .nb-text h3 {
font-size: 20px;
font-weight: 700;
color: #111;
margin-bottom: 8px;
}.neden-biz .nb-text p {
font-size: 15px;
color: #666;
line-height: 1.5;
}/* Beyaz Fayda Kartı */
.neden-biz .nb-benefits-card {
background: #fff;
padding: 20px 30px;
border-radius: 4px; /* Mimari sertlik için köşeleri azalttık */
box-shadow: 0 30px 60px rgba(0,0,0,0.08);
position: relative;
border-left: 5px solid #101c38;
}.neden-biz .nb-card-brand-shape {
position: absolute;
top: 0; right: 0;
width: 40px; height: 40px;
background: #4da6c8;
display: none;
clip-path: polygon(100% 0, 0 0, 100% 100%);
}.neden-biz .nb-benefits-card h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
color: #101c38;
}.neden-biz .nb-benefits-card ul {
list-style: none;
padding: 0;
}.neden-biz .nb-benefits-card li {
display: flex;
align-items: flex-start;
font-size: 15px;
color: #444;
margin-bottom: 15px;
line-height: 1.4;
}.neden-biz .nb-check {
background: #006ea5;
width: 20px;
height: 20px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 15px;
margin-top: 2px;
flex-shrink: 0;
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 992px) {
.neden-biz::before {
background: rgba(248, 249, 250, 0.95);
}
.neden-biz .nb-container {
max-width: 100%;
text-align: center;
}.neden-biz .nb-main-title {
font-size: 34px;
}.neden-biz .nb-badge {
justify-content: center;
}.neden-biz .nb-features {
grid-template-columns: 1fr;
}.neden-biz .nb-feature-item {
align-items: center;
}.neden-biz .nb-benefits-card {
padding: 25px;
text-align: left;
}
}
/**/.faq-alani {
padding: 120px 20px;
background-color: #f8fafc; /* Temiz açık gri arka plan */
color: #101c38;
}.faq-alani .faq-container {
max-width: 1300px;
margin: 0 auto;
display: flex;
gap: 60px;
align-items: center;
}/* --- SOL TARAF: GÖRSEL VE GLASS KART --- */
.faq-alani .faq-left {
flex: 1;
position: relative;
}.faq-alani .faq-main-img {
width: 100%;
height: 650px;
object-fit: cover;
border-radius: 4px; /* Keskin mimari hatlar */
display: block;
}/* Glassmorphism Kartı - Kurumsal Renklere Güncellendi */
.faq-alani .faq-glass-card {
position: absolute;
bottom: -30px;
right: -30px;
background: rgba(16, 28, 56, 0.9); /* Koyu Lacivert Glass */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 35px;
color: #fff;
max-width: 420px;
box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}.faq-alani .faq-glass-icon {
background-color: #4da6c8; /* Mimari Mavi */
width: 50px;
height: 50px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: 20px;
}.faq-alani .faq-glass-icon svg {
width: 26px;
height: 26px;
color: #fff;
}.faq-alani .faq-glass-title h4 {
font-size: 22px;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: -0.5px;
}.faq-alani .faq-glass-title p {
font-size: 15px;
opacity: 0.8;
line-height: 1.5;
margin-bottom: 25px;
}.faq-alani .faq-glass-footer {
display: flex;
flex-direction: column;
gap: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding-top: 25px;
}.faq-alani .faq-contact-item {
display: flex;
align-items: center;
gap: 15px;
}.faq-alani .faq-contact-item svg {
width: 20px;
color: #4da6c8;
}.faq-alani .faq-contact-text span {
display: block;
font-size: 12px;
text-transform: uppercase;
opacity: 0.6;
letter-spacing: 1px;
}.faq-alani .faq-contact-text p {
font-size: 16px;
font-weight: 600;
}/* --- SAĞ TARAF: SSS İÇERİĞİ --- */
.faq-alani .faq-right {
flex: 1.2;
}.faq-alani .faq-badge {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: #006ea5;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 25px;
}.faq-alani .sh-dot {
width: 12px;
height: 12px;
background-color: #4da6c8;
transform: skewX(-20deg);
}.faq-alani .faq-main-title {
font-size: 44px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 40px;
letter-spacing: -1.5px;
}/* Akordeon Elemanları */
.faq-alani .faq-item {
background-color: #fff;
border-radius: 4px;
margin-bottom: 15px;
overflow: hidden;
transition: 0.3s;
border: 1px solid #e2e8f0;
}.faq-alani .faq-header {
padding: 25px 30px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background 0.3s;
}.faq-alani .faq-header h5 {
font-size: 17px;
font-weight: 700;
color: #101c38;
margin: 0;
}.faq-alani .faq-arrow {
transition: 0.4s;
color: #4da6c8;
}.faq-alani .faq-body {
max-height: 0;
overflow: hidden;
transition: all 0.4s ease-in-out;
padding: 0 30px;
opacity: 0;
color: #555;
line-height: 1.7;
}/* Aktif Durum */
.faq-alani .faq-item.active {
border-color: #4da6c8;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}.faq-alani .faq-item.active .faq-header {
background-color: #fcfdfe;
}.faq-alani .faq-item.active .faq-body {
max-height: 500px;
padding: 5px 30px 30px 30px;
opacity: 1;
}.faq-alani .faq-item.active .faq-arrow {
transform: rotate(180deg);
color: #101c38;
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 1024px) {
.neden-biz{
display: none;
}
.faq-alani .faq-container {
flex-direction: column;
gap: 80px;
}
.faq-alani .faq-left {
width: 100%;
max-width: 600px;
display: none;
margin: 0 auto;
}
.faq-alani .faq-glass-card {
right: 0;
left: 0;
bottom: -50px;
margin: 0 20px;
}
.faq-alani .faq-main-title {
font-size: 32px;
text-align: center;
}
.faq-alani .faq-badge {
width: 100%;
justify-content: center;
}
}/**//* --- ANA BÖLÜM AYARLARI --- */
.pencere-kesif {
margin: 0;
padding: 120px 20px;
background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1920&auto=format&fit=crop');
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
}/* Koyu Lacivert Geçiş Katmanı */
.pencere-kesif .pk-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(135deg, rgba(16, 28, 56, 0.95) 0%, rgba(16, 28, 56, 0.7) 100%);
z-index: 1;
}.pencere-kesif .pk-container {
max-width: 1300px;
margin: 0 auto;
display: flex;
gap: 80px;
width: 100%;
align-items: center;
position: relative;
z-index: 2;
}/* --- SOL İÇERİK --- */
.pencere-kesif .pk-content { flex: 1.2; }.pencere-kesif .pk-badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: rgba(77, 166, 200, 0.2);
padding: 8px 20px;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
color: #4da6c8;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 1px;
}.pencere-kesif .sh-dot {
width: 12px; height: 12px; background: #4da6c8; transform: skewX(-20deg);
}.pencere-kesif .pk-main-title {
font-size: 52px;
line-height: 1.1;
font-weight: 800;
color: #fff;
margin-bottom: 25px;
letter-spacing: -1.5px;
}.pencere-kesif .pk-description {
font-size: 19px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
font-weight: 300;
max-width: 600px;
}/* Buton Stili (Slider ile uyumlu) */
.pencere-kesif .pk-cta-btn {
display: inline-flex;
align-items: center;
background: #fff;
color: #101c38;
padding: 16px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
gap: 15px;
transition: all 0.3s ease;
}.pencere-kesif .pk-cta-btn:hover {
background: #4da6c8;
color: #fff;
transform: translateY(-3px);
}.pencere-kesif .pk-btn-icon {
background: #101c38;
color: #fff;
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}.pencere-kesif .pk-cta-btn:hover .pk-btn-icon { background: #fff; color: #101c38; }/* --- SAĞ TARAF: DİNAMİK FORM TASARIMI (DARK GLASSMOPHISM) --- */
.pencere-kesif .pk-form-card {
flex: 1;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 45px;
box-shadow: 0 40px 100px rgba(0,0,0,0.3);
}.pencere-kesif .pk-form-header { margin-bottom: 30px; }
.pencere-kesif .pk-form-title { font-size: 28px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.pencere-kesif .pk-form-header p { font-size: 15px; color: rgba(255,255,255,0.6); }/* Veritabanından Gelen Form Elemanlarını Hedefleme */
.pencere-kesif .basliklabel {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 8px;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
letter-spacing: 0.5px;
}.pencere-kesif .basliklabel span { color: #4da6c8; } /* Yıldız rengi */.pencere-kesif .form-control {
width: 100% !important;
background: rgba(255, 255, 255, 0.07) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 4px !important; /* Keskin hatlar */
padding: 14px 18px !important;
color: #fff !important;
font-size: 15px !important;
margin-bottom: 15px;
outline: none;
transition: all 0.3s ease;
}.pencere-kesif .form-control:focus {
background: rgba(255, 255, 255, 0.12) !important;
border-color: #4da6c8 !important;
box-shadow: 0 0 15px rgba(77, 166, 200, 0.2);
}/* Güvenlik Kodu Alanı */
.pencere-kesif .guvenlik_input { margin-top: 10px; }
.pencere-kesif .guvenlik_resim {
background: #fff;
padding: 5px;
border-radius: 4px;
margin-bottom: 10px;
display: inline-block;
}/* Form Gönder Butonu (Tüm formlarda geçerli) */
.pencere-kesif .btn[type="button"],
.pencere-kesif button[type="submit"],
.pencere-kesif #submit_7 {
width: 100% !important;
background: #4da6c8 !important;
color: #fff !important;
border: none !important;
padding: 18px !important;
border-radius: 4px !important;
font-size: 16px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 30px !important;
}.pencere-kesif .btn:hover {
background: #3b8eb0 !important;
box-shadow: 0 10px 25px rgba(77, 166, 200, 0.4);
}/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
.pencere-kesif .pk-container { flex-direction: column; gap: 60px; text-align: center; }
.pencere-kesif .pk-main-title { font-size: 38px; }
.pencere-kesif .pk-description { margin: 0 auto 30px auto; }
.pencere-kesif .pk-form-card { width: 100%; max-width: 550px; text-align: left;display:none; }
}@media(max-width:1024px){
.h-text-box h2.h-title {
font-size: 30px;
}.hakkimizda-v3,
.faq-alani{
padding: 50px 20px;
}.pencere-kesif {
min-height: auto;
padding: 50px 20px;
}
}