:root,
[data-bs-theme=light] {
--bs-primary: #225ba4;
--bs-secondary: #f79520;
--bs-primary-100: #c5dcfa;
--bs-primary-700: #4683d4;
--bs-primary-900: #376aad;
--bs-secondary-300: #FFF5B3;
--bs-secondary-500: #FEE84D;
--bs-secondary-700: #F4D501;
--bs-dark: #222222;
--bs-dark-500: #888888;
--bs-dark-700: #444444;
--bs-body-font-family: "Plus Jakarta Sans", sans-serif;
--bs-body-color: #5a564d;
--bs-body-bg: #fff;
--bs-border-radius: 0.375rem;
--bs-border-radius: 0.375rem;
--primary-orange: #225ba4;
}/* ==========================================================================
2. GENEL SIFIRLAMALAR (Reset)
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
}body {
margin: 0;
font-family: var(--bs-body-font-family);
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}img {
max-width: 100%;
height: auto;
vertical-align: middle;
border-style: none;
}p {
margin-top: 0;
margin-bottom: 1rem;
}a {
text-decoration: none;
}h1, h2, h3 {
margin-top: 0;
margin-bottom: 0.5rem;
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 600;
line-height: 1.25;
color: #222222;
}.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 50px;
background-color: #fff;
z-index: 1000;
transition: background-color 0.3s ease;
box-sizing: border-box;
box-shadow: 0px 0px 10px 0px #00000008;
border-bottom: 1px solid #0000000d;
}.site-header .logo {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
}.site-header .logo img {
height: auto;
width: 130px;
display: block;
}.site-header .main-nav {
flex-grow: 1;
display: flex;
justify-content: center;
}.site-header .main-nav ul#main-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}.site-header .main-nav a {
color: #5a564d;
font-size: 16px;
padding: 30px 12px;
cursor: pointer;
font-weight: 500;
display: inline-block;
position: relative;
line-height: 1.1;
}.site-header .main-nav a:hover {
color: var(--primary-orange);
}/* Alt Menüler: Masaüstü */
.site-header .nav-item.nav-submenu {
position: relative;
}.site-header .nav-submenu > a::after {
content: "▼";
font-size: 0.6em;
margin-left: 7px;
display: inline-block;
transition: transform 0.3s ease-in-out;
}.site-header .nav-submenu ul {
margin: 0;
top: 100%;
background-color: #fff;
display: block;
left: 0;
list-style: none;
opacity: 0;
/* --- KRİTİK EKLEMELER --- */
visibility: hidden; /* Görünmezken alanı işgal etse de etkileşime girmez */
pointer-events: none; /* Mouse alt menü alanına gelse bile tetiklenmez */
/* ------------------------ */
padding: 20px 0;
position: absolute;
width: 240px;
z-index: 10;
margin-top: 0; /* Boşluğu kapatmak için -3px yerine 0 veya pozitif yapın */
box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 0.05);
transition: all 0.2s ease-in-out;
border: 1px solid rgba(0, 0, 0, 0.08);
border-width: 0 1px 1px;
border-radius: 0 0 8px 8px;
transform: translateY(10px); /* Hafif aşağıda başlasın */
}.site-header .nav-submenu ul li {
padding: 0;
margin: 0;
}.site-header .nav-submenu ul a {
border-radius: 5px;
position: relative;
color: #5a564d;
display: block;
font-size: 15px;
font-weight: 500;
transition: 0.3s ease all;
padding: 10px 25px;
}.site-header .nav-submenu ul a span {
display: inline-block;
transition: 0.3s ease all;
position: relative;
}.site-header .nav-submenu ul a span:after {
content: "";
position: absolute;
height: 1px;
width: 0;
background: #222222;
bottom: -3px;
right: 0;
transition: 0.3s ease all;
transform-origin: right;
}.site-header .nav-submenu ul a:hover span:after {
width: 100%;
transform-origin: left;
left: 0;
right: auto;
}.site-header .nav-item.nav-submenu:hover > ul {
opacity: 1;
visibility: visible; /* Mouse geldiğinde görünür yap */
pointer-events: auto; /* Mouse geldiğinde tıklanabilir yap */
transform: translateY(0);
}.site-header .nav-item.nav-submenu:hover > a::after {
transform: rotate(180deg);
}/* Hamburger Menü Butonu */
.site-header .menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
z-index: 1001;
}.site-header .menu-toggle .bar {
display: block;
width: 25px;
height: 3px;
background-color: #fff;
margin: 5px 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 Menü Arka Plan Overlay */
.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}.nav-overlay.is-active {
opacity: 1;
visibility: visible;
}/* Mobil Görünüm */
@media (max-width: 1200px) {
.site-header .menu-toggle {
display: block;
}.site-header .main-nav {
border-right: none;
margin-right: 0;
padding-right: 0;
justify-content: flex-end;
}.site-header .main-nav ul#main-menu {
overflow-y: auto;
padding-bottom: 40px;
flex-direction: column;
position: fixed;
top: 0;
left: -100%;
width: 80%;
max-width: 320px;
height: 100vh;
background-color: #1a1a1a;
padding: 40px 40px 40px;
align-items: center;
gap: 15px;
transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1);
z-index: 999;
}.site-header .main-nav ul#main-menu .logo img {
height: auto;
width: 200px;
}.site-header .main-nav ul#main-menu.is-active {
left: 0;
}.site-header .main-nav ul a {
font-size: 18px;
width: 100%;
}.site-header .main-nav ul li {
position: relative;
width: 100%;
}.site-header .main-nav ul li .mobil-logo {
margin-bottom: 25px;
display: block !important;
}/* Mobil Alt Menüler */
.site-header .nav-submenu > li::after {
content: "›";
font-size: 1.8em;
font-weight: bold;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%) rotate(0deg);
transition: transform 0.3s ease-in-out;
}.site-header .nav-submenu ul {
position: static;
width: 100%;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background-color: rgba(0, 0, 0, 0.2);
padding: 10px 0 10px 20px;
margin-top: 10px;
border-radius: 8px;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out,
margin 0.4s ease-in-out;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
}.site-header .nav-submenu ul{
padding: 0;
}.site-header .nav-submenu.submenu-open > ul {
max-height: 500px;
}.site-header .nav-submenu.submenu-open > a::after {
transform: translateY(-50%) rotate(90deg);
}
}/* ==========================================================================
6. BUTONLAR (Buttons)
========================================================================== */
.btn {
display: inline-block;
font-weight: 500;
line-height: 1.25;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 10px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}.btn-primary {
color: #ffffff;
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
.btn-secondary {
color: #000;
background-color: var(--bs-secondary);
border-color: var(--bs-secondary);
}
.btn-lg {
padding: 15px 35px;
font-size: 1.125rem;
border-radius: 14px;
}.btn-standard {
padding: 10px 18px;
line-height: 1.75;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
color: #fff;
}
.btn-standard.btn-secondary { color: #000; }
.btn-standard.btn-lg { line-height: 1.945; }.btn-standard .btn-icon {
background-color: #fff;
color: var(--bs-dark);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
margin: -5px -13px -5px 12px;
transition: background-color 0.15s ease-in-out;
overflow: hidden;
width: 38px;
height: 38px;
}
.btn-standard.btn-lg .btn-icon {
border-radius: 10px;
width: 45px;
height: 45px;
}
.btn-standard .btn-icon img {
width: 18px;
transition: filter 0.15s ease-in-out;
}
.btn-standard.btn-lg .btn-icon img { width: 20px; }.btn-standard:hover .btn-icon img {
animation: btnIconMove 0.5s forwards;
}.btn-standard.btn-primary {
background: conic-gradient(from 166.64deg at 21.67% 70.54%, var(--bs-primary-900) 0deg, var(--bs-primary-700) 360deg);
}
.btn-standard.btn-secondary {
background: conic-gradient(from 166.64deg at 21.67% 70.54%, var(--bs-secondary-300) 0deg, var(--bs-secondary) 360deg);
}@keyframes btnIconMove {
49% { transform: translateX(100%); }
50% { opacity: 0; transform: translateX(-100%); }
51% { opacity: 1; }
}@media (max-width: 991.98px) {
.btn-standard { padding: 8px 16px; }
.btn-standard .btn-icon { width: 35px; height: 35px; }
.btn-standard.btn-lg { line-height: 1.8; }
.btn-standard.btn-lg .btn-icon { border-radius: 8px; width: 40px; height: 40px; }
.btn-standard.btn-lg .btn-icon img { width: 18px; }
}/*
@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: #5f8f8f;
border-color: #5f8f8f;
color: #fff;
}.btn2 {
background: #497676;
border-color: #497676;
color: #fff;
}.btn3 {
background: #375f5f;
border-color: #375f5f;
color: #fff;
}
}.mobilbuttonlar {
display: none;
}
*//**//* --- GENEL FOOTER STİLLERİ --- */
footer {
color: var(--bs-body-color);
}
footer p {
margin-bottom: 15px;
line-height: 1.5;
}
footer .footer_widget ul {
list-style: none;
margin-top: -10px;
padding: 0;
}
footer .btn-link, footer a, footer p a, footer p, footer strong, footer b {
color: rgba(255, 255, 255, 0.7);
}.footer-title {
margin-bottom: 20px;
font-weight: 600;
text-transform: capitalize;
font-size: 20px;
position: relative;
}.footer-top {
padding: 80px 0 40px;
}
.footer-top .widget {
margin-bottom: 30px;
}.footer-bottom {
padding: 25px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}/* --- FOOTER STYLE 1 (Özel Arka Plan ve Boşluklar) --- */
.footer-style1 {
position: relative;
z-index: 1;
overflow: hidden;
background-color: var(--bs-primary); /* Sitedeki ana mavi/yeşil tonu */
}
.footer-style1 .footer-top {
padding: 65px 0 30px;
}
.footer-style1 .footer-title {
margin-bottom: 30px;
margin-top: 0;
color: white;
}
.footer-style1 .footer-bottom {
padding: 30px 0;
border-top: 1px solid rgba(255, 255, 255, 0.3);
font-size: 15px;
}
.footer-style1 .footer-bottom p {
color: #fff;
}
.footer-style1 .widget {
margin-bottom: 50px;
}/* --- LİNK VE MENÜ STİLLERİ --- */
.footer_widget ul li a {
padding: 8px 0;
display: block;
line-height: 1.5;
font-size: 15px;
color: #fff;
}
.footer_widget ul li a span {
position: relative;
}
/* Link Alt Çizgi Animasyonu */
.footer_widget ul li a span::after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: -4px;
height: 1px;
background-color: var(--bs-secondary);
opacity: 0;
transform: translateY(1px);
transition: all 0.15s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.footer_widget ul li a:hover span::after {
opacity: 1;
transform: translateY(-3px) translateZ(0);
transition-delay: 0.2s;
transition-duration: 0.15s;
}/* --- İLETİŞİM BİLGİLERİ (Contact Info) --- */
.contact-info ul {
margin-top: 0 !important;
}
.contact-info ul li {
position: relative;
line-height: 1.4;
margin-bottom: 25px;
}
.contact-info ul li p {
font-weight: 400;
color: #fff;
font-size: 15px;
margin-bottom: 2px;
}
.contact-info ul li a {
padding: 0;
display: block;
line-height: inherit;
font-size: 20px;
font-weight: 500;
color: var(--bs-secondary); /* Turuncu/Sarı tonu */
text-decoration-line: underline !important;
text-decoration-color: var(--bs-secondary) !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 4px;
}/* --- YARDIMCI VE MOBİL ARAÇLAR --- */
.p-l60 { padding-left: 60px; }
.m-b0 { margin-bottom: 0px !important; }@media (max-width: 991.98px) {
.footer-style1 .footer-top {
padding: 50px 0 10px;
}
.footer-style1 .widget {
margin-bottom: 40px;
}
}@media (max-width: 767px) {
.p-sm-l15 { padding-left: 15px; }
.footer-top { padding: 60px 0 20px; }
}@media (max-width: 575.98px) {
.footer-style1 .footer-bottom {
padding: 20px 0;
font-size: 13px;
}
}/* Sosyal Medya İkonları için SVG Boyutu (HTML'deki inline stile ek olarak) */
.contact-info .d-flex a svg {
width: 27px;
height: 27px;
}.whatsapp {
transition: 0.5s all;
position: fixed;
bottom: 60px;
left: 30px;
z-index: 999;
outline: none;
}.whatsapp-content {
box-shadow: 0px 0px 4px 6px #cccccc4f;
border-radius: 10px;
/* ANIMASYON AYARLARI BURADA OLMALI */
animation-name: heartBeat; /* Animasyon ismi buraya gelmeli */
animation-duration: 1.3s; /* Kalp atışı için 1.3s idealdir */
animation-iteration-count: infinite; /* Sürekli tekrar etsin */
animation-timing-function: ease-in-out;
/* Gecikme 5 saniye çok uzun, test için 1s yapabilir veya silebilirsiniz */
animation-delay: 1s;
}/* Kalp Atışı Animasyon Tanımı (Keyframes) */
@keyframes heartBeat {
0% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.3); }
70% { transform: scale(1); }
}/* Safari ve eski Chrome için */
@-webkit-keyframes heartBeat {
0% { -webkit-transform: scale(1); }
14% { -webkit-transform: scale(1.3); }
28% { -webkit-transform: scale(1); }
42% { -webkit-transform: scale(1.3); }
70% { -webkit-transform: scale(1); }
}/* Container içindeki link ve resmin çerçevelerini sıfırla */
.whatsapp-content a,
.whatsapp-content img {
border: none !important;
outline: none !important;
text-decoration: none !important;
box-shadow: none !important; /* Eğer gölge çerçeve gibi görünüyorsa */
}/* Resmin altında oluşabilecek boşluğu engellemek için */
.whatsapp-content img {
display: block;
}button.back-to-top {
border: 0;
box-shadow: 2px 2px 12px -5px #000000;
color: #fff;
cursor: pointer;
height: 45px;
margin: 0;
position: fixed;
right: 15px;
/* İçerik Ortalama (Eklendi) */
display: flex;
align-items: center;
justify-content: center;
/* ---------------------- */
z-index: 99999;
padding: 0;
font-size: 12px;
background-color: #4683d4; /* Örnek renk: var(--bs-primary-700) yerine */
border-radius: 50%;
bottom: -60px; /* Başlangıçta ekranın dışında */
transition: all 0.3s ease-in-out;
width: 45px;
}/* SVG CSS (Eklendi) */
button.back-to-top svg {
width: 16px;
height: 16px;
transition: transform 0.2s;
}button.back-to-top:hover svg {
transform: translateY(-3px); /* Hover yapınca hafif yukarı zıplama efekti */
}button.back-to-top.active {
bottom: 15px; /* Göründüğünde pozisyonu */
}@media (max-width: 767.98px) {
button.back-to-top {
height: 35px;
width: 35px;
bottom: -50px; /* Mobilde de başta gizli */
right: 8px;
}
button.back-to-top.active {
bottom: 8px;
}
button.back-to-top svg {
width: 14px;
height: 14px;
}
}/**//* Başlangıçta gizli ve 50px aşağıda duracaklar */
.auto-reveal {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
visibility: visible !important; /* Wow.js çakışmalarını önlemek için */
}/* Ekrana girdiklerinde alacakları hal */
.auto-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}/* Yan yana duran elementlerin (kartlar vs.) sırayla açılması için gecikme sınıfları */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }@media(max-width:1024px){
.auto-reveal.is-visible {
opacity: 1;
}
}/* Auto-reveal kısmını mobilde daha güvenli hale getir */
@media (max-width: 1024px) {
.auto-reveal {
/* Mobilde animasyonun takılma ihtimaline karşı başlangıç değerlerini yumuşat */
opacity: 1;
transform: translateY(0px);
transition: all 0.6s ease-out;
}.auto-reveal.is-visible {
opacity: 1 !important;
transform: translateY(0) !important;
visibility: visible !important;
}
}/* Bölüm boşluklarını mobilde daralt (Section-sp2 için) */
@media (max-width: 767px) {
.section-sp2 {
padding-top: 50px;
padding-bottom: 50px;
}
/* Eğer bg-light sınıfı olan alan hala görünmüyorsa yükseklik ver */
.section-area {
width: 100%;
position: relative;
display: block;
}
}/* Hamburger butonunu görünür yap */
.site-header .menu-toggle .bar {
display: block;
width: 25px;
height: 3px;
background-color: black; /* Beyaz yerine ana mavi rengi yapıldı */
margin: 5px 0;
transition: all 0.4s;
}.site-header .menu-toggle .bar:nth-child(2) {
width: 14px;
}.site-header .menu-toggle.is-active .bar {}@media (max-width: 1200px) {
.site-header .main-nav ul#main-menu {
background-color: #ffffff; /* Siyah yerine beyaz yapabilirsin veya koyu kalacaksa: */
border-right: 1px solid rgba(0,0,0,0.1);
}
.site-header .main-nav a {
color: #222; /* Yazı rengini koyulaştır */
padding: 15px 0; /* Mobilde tıklama alanını daralt */
border-bottom: 1px solid #eee;
width: 100%;
}/* Mobil Alt Menü (Submenu) Yazı Renkleri */
.site-header .nav-submenu ul {
background-color: #f9f9f9;
}
.site-header .nav-submenu ul a {
color: #555 !important;
}
}@media(max-width:1024px){.site-header{
padding: 10px 20px;
}.btn-lg {
font-size: 15px;
}
}