:root {
--font1: "Onest", Helvetica, Arial, sans-serif;
--font2: "Inter", Helvetica, Arial, sans-serif;
--primary-orange: #ff6b00;
--radius: 3px;
--renk1: #376285;
--renk2: #2f5370;
--renk3: #111827;
--warning: #e9542a;
}/* Genel Sıfırlama ve Font */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
background-color: #f4f6f8;
}body {
font-family: var(--font1);
padding: 0px;
margin: 0px;
}body.menu-open {
overflow: hidden;
}svg {
width: 30px;
height: 30px;
}.container {
max-width: 1200px;
}/* Site Header: Aydınlık Wix Teması */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #ffffff;
border-bottom: 1px solid #e2e2e2;
z-index: 1000;
transition: all 0.3s ease;
box-sizing: border-box;
}.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 40px;
margin: 0 auto;
max-width: 100%;
}/* Yazı Şeklinde Logo ve O İkonu */
.logo-text {
display: flex;
align-items: center;
font-size: 25px;
font-weight: 700;
color: #000;
text-decoration: none;
letter-spacing: -0.5px;
flex-shrink: 0;
}.logo-text img {
width: auto;
height: 60px;
}.logo-text b {
color: var(--renk1);
}.logo-svg {
margin-right: 2px;
margin-top: 2px;
width: 25px;
height: 25px;
fill: var(--warning);
}/* Ana Navigasyon */
.site-header .main-nav {
flex-grow: 1;
display: flex;
justify-content: end;
margin-right: 40px;
}.site-header .main-nav ul#main-menu {
display: flex;
list-style: none;
gap: 24px;
margin: 0;
padding: 0;
align-items: center;
}.site-header .main-nav ul#main-menu li:nth-child(2) {
display: none;
}.site-header .main-nav a {
color: #000000;
font-weight: 500;
font-size: 15px;
text-decoration: none;
padding: 10px 0;
position: relative;
transition: color 0.2s ease;
display: flex;
align-items: center;
}.site-header .main-nav a svg {
width: 15px;
height: 15px;
}.site-header .main-nav a:hover {
color: var(--renk1);
}/* Dikey Ayırıcı Çizgi */
.menu-divider {
width: 1px;
height: 20px;
background-color: #d8d8d8;
margin: 0 5px;
}/* Alt Menüler: Masaüstü (Beyaz Tema) */
.site-header .nav-item.nav-submenu {
position: relative;
}.site-header .nav-submenu > a::after {
content: "";
display: inline-block;
margin-left: 6px;
width: 10px;
height: 6px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: transform 0.3s ease;
}.site-header .nav-item.nav-submenu:hover > a::after {
transform: rotate(180deg);
}.site-header .nav-submenu ul {
list-style: none;
padding: 10px 0;
margin: 0;
background-color: #ffffff;
border: 1px solid #e2e2e2;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
min-width: 300px;
position: absolute;
top: 100%;
left: 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 10;
}.site-header .nav-submenu ul li:nth-child(1) {
display: block !important;
}
.site-header .nav-submenu ul li:nth-child(2) {
display: block !important;
}.site-header .nav-submenu ul a {
padding: 10px 20px;
font-size: 15px;
display: block;
}.site-header .nav-submenu ul a:hover {
background-color: #f7f7f7;
color: var(--renk1);
}.site-header .nav-item.nav-submenu:hover > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}/* Sağ Alan: Arama, Buton ve Menü İkonu */
.header-actions {
display: flex;
align-items: center;
gap: 20px;
}/* Arama Alanı Tasarımı ve Animasyonu */
.search-box {
display: flex;
align-items: center;
position: relative;
}.search-input {
width: 0;
opacity: 0;
padding: 8px 15px;
border: 1px solid transparent;
border-radius: 20px;
font-size: 14px;
outline: none;
background-color: #f4f4f4;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: absolute;
right: 35px; /* İkonun soluna doğru açılır */
}/* Arama aktifleştiğinde input görünür */
.search-box.active .search-input {
width: 200px;
opacity: 1;
border-color: #ccc;
right: 35px;
}.search-toggle-btn {
background: none;
border: none;
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
justify-content: center;
color: #000;
transition: color 0.3s;
z-index: 2;
}.search-toggle-btn:hover {
color: var(--renk1);
}/* Mavi "Başla" Butonu */
.btn-primary {
background-color: var(--renk1);
color: #ffffff;
padding: 10px 24px;
border-radius: 24px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background-color 0.3s ease;
white-space: nowrap;
}.btn-primary:hover {
background-color: var(--renk1);
}/* Hamburger Menü Butonu (Siyah temalı) */
.site-header .menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 5px;
z-index: 1001;
}.site-header .menu-toggle .bar {
display: block;
width: 24px;
height: 2px;
background-color: #000;
margin: 6px 0;
transition: all 0.4s;
}.site-header .menu-toggle.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.site-header .menu-toggle.is-active .bar:nth-child(2) {
opacity: 0;
}
.site-header .menu-toggle.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}/* Mobil Görünüm */
@media (max-width: 1200px) {
.site-header .menu-toggle {
display: block;
}
.site-header .main-nav {
display: none;
} /* Mobil menü açık değilse gizle */.site-header .main-nav.is-active {
display: block;
position: fixed;
top: 0;
right: 0;
width: 80%;
max-width: 320px;
height: 100vh;
background-color: #ffffff;
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
padding: 80px 30px 40px;
z-index: 999;
margin-left: 0;
overflow-y: auto;
}.site-header .main-nav ul#main-menu {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}.site-header .main-nav a {
font-size: 18px;
width: 100%;
border-bottom: 1px solid #f0f0f0;
}.menu-divider {
width: 100%;
height: 1px;
margin: 15px 0;
}/* Mobil Arama Açıldığında */
.search-box.active .search-input {
width: 140px;
}
}/* Overlay (Mobil menü arka planı) */
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: all 0.4s;
}.nav-overlay.is-active {
opacity: 1;
visibility: visible;
}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 0.1s ease-out 0s;
-moz-transition: all 0.1s ease-out 0s;
-ms-transition: all 0.1s ease-out 0s;
-o-transition: all 0.1s ease-out 0s;
transition: all 0.1s ease-out 0s;
color: #fff;
align-items: center;
justify-content: center;
animation: whatsapp infinite 2s linear;
z-index: 9999;
}@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;
}
}.buttons-wrapper {
display: flex;
gap: 16px;
align-items: center;
}/* Start Free Trial Butonu */
.btn-dark,
.btn-dark2 {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #28282b;
color: #ffffff;
padding: 14px 28px;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
/* Arkasındaki hafif mor gölge efekti (glow) */
}.btn-dark:hover {
background-color: #1a1a1c;
transform: translateY(-2px);
}.btn-dark svg,
.btn-dark2 svg {
margin-left: 10px;
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}.btn-dark2 {
background: var(--renk1);
}.btn-dark2:hover {
background: var(--renk2);
}/* Watch a Demo Butonu */
.btn-light {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
color: #0f0f0f;
padding: 13px 28px;
/* Border olduğu için 1px kıstık */
border-radius: 8px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border: 1px solid #e5e7eb;
cursor: pointer;
transition: all 0.3s ease;
}.btn-light:hover {
background-color: #f9fafb;
border-color: #d1d5db;
}.btn-light svg {
margin-left: 10px;
width: 12px;
height: 12px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}.btn-light,
.btn-dark,
.btn-dark2 {
font-size: 14px;
font-weight: 500;
}.mobilbuttonlar {
display: none;
}@media (max-width: 1024px) {
a.WhatsApp1 {
bottom: 60px;
}.btn {
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 20px;
width: 100%;
}.btn svg {
width: 24px;
height: 24px;
fill: currentColor;
}.mobilbuttonlar {
position: fixed;
width: 100%;
bottom: 0;
z-index: 999;
display: flex;
}.btn1 {
background: #e9542a;
border-color: #e9542a;
color: #fff;
}.btn2 {
background: #c8421c;
border-color: #c8421c;
color: #fff;
}.btn3 {
background: #b73915;
border-color: #b73915;
color: #fff;
}
}/**//* =========================================
SABİT (FLOATING) DEMO BUTONU - DAHA ZARİF BOYUT
========================================= *//* Ana Kapsayıcı Konumlandırması *//* === SAĞ ALTTAN AÇILAN ALTERNATİF SİSTEM === */.ym-right-system {
position: fixed;
bottom: 20px;
right: 20px; /* SAGA HİZALANDI */
z-index: 10000;
}/* Sayfa Karartması */
.ym-right-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
cursor: pointer;
}/* Kapsayıcı: Öğeleri sağa yaslar */
.ym-right-container {
position: relative;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
}/* === BUTONUN KENDİSİ === */
.ym-right-btn {
position: fixed;
right: 20px;
z-index: 99;
bottom: 20px;
background: #e9542a; /* YENİ TURUNCU/UYARI RENGİ */
border: none;
color: #fff;
padding: 0;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 10px 25px rgba(233, 84, 42, 0.4); /* Gölge de renge uyarlandı */
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
align-items: center;
justify-content: center;
width: 220px; /* İlk baştaki genişlik */
height: 50px;
overflow: hidden; /* Dışa taşan metni gizler */
}/* Buton Arkası Nabız */
.ym-right-pulse {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50px;
background: #e9542a; /* YENİ RENGİMİZ */
z-index: -1;
animation: ymBtnPulseRight 2s infinite;
}@keyframes ymBtnPulseRight {
0% {
transform: scale(1);
opacity: 0.6;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}/* İçerik (Bilgi & Teklif) */
.ym-right-btn-content {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
width: 100%;
position: absolute;
}.ym-right-btn-icon {
display: flex;
align-items: center;
}.ym-right-btn-icon svg {
width: 22px;
height: 22px;
}.ym-right-btn-text .ym-rb-title {
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}/* Gizli Çarpı İkonu */
.ym-right-close-icon {
position: absolute;
opacity: 0;
transform: scale(0.5) rotate(-90deg);
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}.ym-right-close-icon svg {
width: 24px;
height: 24px;
}/* === POPOVER (YUKARI AÇILAN MENÜ) === */
.ym-right-popover {
position: absolute;
bottom: calc(100% + 20px);
right: 0; /* SAĞA HİZALI */
width: 320px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
padding: 24px;
opacity: 0;
visibility: hidden;/* Sağ Alttan büyüyerek çıkma efekti */
transform: translateY(20px) scale(0.95);
transform-origin: bottom right;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}.ym-rp-header h4 {
margin: 0 0 6px;
font-size: 18px;
color: var(--renk1);
font-weight: 800;
}.ym-rp-header p {
margin: 0 0 20px;
font-size: 13px;
color: #64748b;
line-height: 1.4;
}/* Paket Listesi */
.ym-rp-packages {
display: flex;
flex-direction: column;
gap: 12px;
}/* Paket Kartı */
.ym-rp-pkg {
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
background: #f8fafc;
border: 2px solid #f1f5f9;
padding: 14px 16px;
border-radius: 12px;
transition: all 0.2s ease;
}.ym-rp-pkg:hover {
background: #f0fdf4;
border-color: #25d366;
transform: translateX(-5px); /* Üzerine gelince çok hafif Sola kayar */
}.ym-rp-info {
display: flex;
flex-direction: column;
}.ym-rp-name {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}.ym-rp-price {
font-size: 15px;
font-weight: 800;
color: #e9542a; /* Rakam da turuncu oldu */
}.ym-rp-wa-icon {
width: 34px;
height: 34px;
background: rgba(37, 211, 102, 0.1);
color: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.ym-rp-wa-icon.yeni svg {
fill: #25d366;
}.ym-rp-pkg:hover .ym-rp-wa-icon.yeni svg {
fill: #fff;
}.ym-rp-wa-icon svg {
width: 18px;
height: 18px;
}.ym-rp-pkg:hover .ym-rp-wa-icon {
background: #25d366;
color: #fff;
}/* === AÇILMA DURUMU (ACTIVE) TETİKLEYİCİLERİ === */.ym-right-system.is-open .ym-right-overlay {
opacity: 1;
visibility: visible;
}.ym-right-system.is-open .ym-right-popover {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}/* !!! CANCEL İKONU VE BUTON KÜÇÜLME EFEKTİ !!! *//* Mobilde uyum */
@media (max-width: 1200px) {
.ym-right-system {
bottom: 20px;
right: 20px;
}
.ym-right-popover {
width: 280px;
}.site-header {
top: 45px;
}.header-buttons {
position: fixed;
left: 0;
width: 100%;
top: 0;
border-radius: 0px;
}.header-container {
padding: 12px 15px;
}
.site-header .main-nav {
margin-right: 0;
}
.site-header .main-nav ul#main-menu li:nth-child(1) {
display: none;
}
.site-header .main-nav ul#main-menu li:nth-child(2) {
display: block;
}.site-header .nav-item.nav-submenu li {
display: block !important;
}
}@media (max-width: 1024px) {
.ym-right-btn {
z-index: 9999;
}.ym-right-btn {
right: 10px;
bottom: 65px;
}.site-header .nav-item.nav-submenu:hover > ul {
position: relative;
left: 0;
right: 0;
border: none;
box-shadow: none;
}.site-header .nav-submenu ul a {
padding: 10px 0px;
}.ym-right-popover {
bottom: calc(100% + 110px);
}
}