:root {
--font1: "Montserrat", Helvetica, Arial, sans-serif;
--primary-orange: #8a9a5b;
--renk2: #8a9a5b;
--renk3: #f5f5dc;
--radius: 3px;
}body {
font-family: var(--font1);
padding: 0px;
margin: 0px;
}body.menu-open {
overflow: hidden;
}h1,
h2,
h3,
h4,
p {
margin: 0px;
}/* --- GENEL HEADER AYARLARI --- */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4%;
background-color: transparent; /* Başlangıçta şeffaf */
z-index: 1000;
transition:
background-color 0.4s ease,
border-bottom 0.4s ease;
box-sizing: border-box;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}/* --- SCROLL DURUMU (Aşağı inince) --- */
.site-header.is-scrolled {
background-color: #ffffff; /* Siyah yerine beyaz arkaplan */
border-bottom: 1px solid #e0e0e0;
}/* --- HOVER, MENÜ AÇIK VEYA SCROLL DURUMUNDA ARKA PLAN --- */
.site-header:hover,
.site-header.is-light {
background-color: #ffffff;
border-bottom: 1px solid #e0e0e0;
}/* Header beyaz olunca ikon çizgileri siyah olur */
.site-header:hover .bar,
.site-header.is-light .bar,
.site-header.is-scrolled .bar {
background-color: #000;
}/* Header beyaz olunca linkler ve butonlar siyah olur */
.site-header:hover .header-link,
.site-header.is-light .header-link,
.site-header.is-scrolled .header-link,
.site-header:hover .header-btn,
.site-header.is-light .header-btn,
.site-header.is-scrolled .header-btn {
color: #000;
border-color: #000;
}/* Header beyaz olunca beyaz logo siyah olur */
.site-header:hover .logo img,
.site-header.is-light .logo img,
.site-header.is-scrolled .logo img {
filter: brightness(0); /* Beyaz logoyu siyaha çevirir */
}.header-left,
.header-right {
flex: 1;
display: flex;
align-items: center;
}.header-right {
justify-content: flex-end;
gap: 20px;
}.header-center {
flex: 0 0 auto;
display: flex;
justify-content: center;
}/* Logo Ayarları */
.site-header .logo img {
height: 25px;
width: auto;
display: block;
filter: invert(1);
transition: filter 0.4s ease; /* Logo renk geçişi için */
}/* Sağ Linkler */
.header-link,
.header-btn {
color: #fff;
font-size: 13px;
text-decoration: none;
font-weight: 500;
letter-spacing: 1px;
transition: color 0.4s ease;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 5px;
}.header-link svg {
width: 15px;
height: 15px;
fill: #fff;
}.header-btn {
border: 1px solid #fff;
padding: 8px 15px;
transition: all 0.4s ease;
}/* --- HOVER VE MENÜ AÇIK DURUMU (HEADER BEYAZ OLUR) --- */
.site-header:hover,
.site-header.is-light {
background-color: #ffffff;
border-bottom: 1px solid #e0e0e0;
}/* Header beyaz olunca ikon ve yazılar siyah olur */
.site-header:hover .bar,
.site-header.is-light .bar {
background-color: #000;
}.site-header:hover .header-link,
.site-header.is-light .header-link,
.site-header:hover .header-btn,
.site-header.is-light .header-btn {
color: #000;
border-color: #000;
}/* ÖNEMLİ: Eğer logonuz varsayılan olarak beyazsa, header beyaz olduğunda siyah yapmak için filter kullanıyoruz. Eğer renkli bir logonuz varsa bu satırı silebilirsiniz. */
.site-header:hover .logo img,
.site-header.is-light .logo img {
filter: brightness(0); /* Beyaz logoyu siyaha çevirir */
}.site-header:hover .header-link svg,
.site-header.is-scrolled .header-link svg {
fill: #000;
transition: all 0.4s ease;
}/* --- HAMBURGER MENÜ İKONU --- */
.menu-toggle {
background: none;
border: none;
cursor: pointer;
padding: 10px;
padding-left: 0;
z-index: 1001;
display: flex;
flex-direction: column;
justify-content: center;
}.menu-toggle .bar {
display: block;
width: 32px;
height: 2px;
background-color: #fff;
margin: 3px 0;
transition: all 0.4s ease;
}/* Çarpı (X) Durumu */
.menu-toggle.is-active .bar:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.menu-toggle.is-active .bar:nth-child(2) {
opacity: 0;
}
.menu-toggle.is-active .bar:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}/* --- SOL TARAFTAN AÇILAN YAN MENÜ (SIDEBAR) --- */
.sidebar-menu {
position: fixed;
top: 80px;
left: -400px;
width: 320px;
height: calc(100vh - 80px);
background-color: #fcfcfc;
overflow-y: auto;
transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1);
z-index: 999;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.05);/* Flexbox ayarları */
display: flex;
flex-direction: column;
}
.sidebar-menu.is-active {
left: 0; /* Menü açıldığında içeri girer */
}/* Linkler alanının kalan tüm boşluğu kaplamasını sağlar */
.sidebar-menu ul#main-menu {
flex-grow: 1;
padding-top: 40px;
}/* Alt İletişim Alanı Tasarımı */
.sidebar-contact {
padding: 30px 40px 40px 40px;
background-color: #f7f7f7; /* Menüden çok hafif farklı bir ton */
border-top: 1px solid #eaeaea;
margin-top: 20px;
}.sidebar-contact .contact-title {
font-size: 16px;
color: #333;
margin-bottom: 15px;
margin-top: 0;
font-weight: normal;
letter-spacing: 1px;
}.sidebar-contact .contact-details {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}.sidebar-contact .contact-details a {
font-family: sans-serif;
font-size: 14px;
color: #555;
text-decoration: none;
transition: color 0.3s ease;
}.sidebar-contact .contact-details a:hover {
color: #000;
}/* Sosyal Medya İkonları/Linkleri */
.sidebar-contact .social-links {
display: flex;
gap: 15px;
}.sidebar-contact .social-links a {
font-family: sans-serif;
font-size: 13px;
color: #000;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.3s ease;
padding-bottom: 2px;
}.sidebar-contact .social-links a svg {
fill: #000;
width: 15px;
height: 15px;
}.sidebar-contact .social-links a:hover {
border-color: #000;
}.sidebar-menu ul {
list-style: none;
padding: 0;
margin: 0;
}.sidebar-menu ul li {
position: relative;
}.sidebar-menu ul a {
display: block;
padding: 15px 40px;
color: #333;
font-size: 25px;
font-weight: 400;
text-decoration: none;
transition:
background-color 0.3s ease,
color 0.3s ease;
}.sidebar-menu ul a:hover {
background-color: #f0f0f0;
color: #000;
}/* Alt Menüler (Akordeon Tarzı) */
.sidebar-menu .nav-submenu > a::after {
content: "+";
float: right;
font-size: 1.2em;
font-weight: 300;
transition: transform 0.3s ease;
}.sidebar-menu .nav-submenu.submenu-open > a::after {
content: "-";
}.sidebar-menu .nav-submenu ul {
max-height: 0;
overflow: hidden;
background-color: #f5f5f5;
transition: max-height 0.4s ease;
}.sidebar-menu .nav-submenu.submenu-open > ul {
max-height: 500px; /* İçeriğe göre yetmezse artırabilirsiniz */
}.sidebar-menu .nav-submenu ul a {
padding: 12px 40px 12px 60px; /* Alt menüyü biraz içeriden başlat */
font-size: 16px;
font-family: sans-serif; /* Alt menüler daha düz okunabilir font */
}/* --- OVERLAY (Arkaplan Karartması) --- */
.nav-overlay {
position: fixed;
top: 80px;
left: 0;
width: 100%;
height: calc(100vh - 80px);
background-color: rgba(0, 0, 0, 0.4);
z-index: 998;
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s ease,
visibility 0.4s ease;
}.nav-overlay.is-active {
opacity: 1;
visibility: visible;
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
.sidebar-menu {
width: 85%;
}
.d-none-mobile {
display: none !important;
}
}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;
}
}.mobilbuttonlar {
display: none;
}@media (max-width: 1024px) {
.site-header .logo img {
height: 15px;
}
.sidebar-contact {
padding: 30px 40px 90px 40px;
}
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: #8a9a5b;
border-color: #8a9a5b;
color: #fff;
}.btn2 {
background: #748347;
border-color: #748347;
color: #fff;
}.btn3 {
background: #5c6a35;
border-color: #5c6a35;
color: #fff;
}
}