/* =========================================
GENEL VE KÖK AYARLARI
========================================= */
:root {
--font1: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
--font2: "Montserrat", Helvetica, Arial, sans-serif;
--primary-orange: #004811;
--radius: 3px;
}body {
font-family: var(--font2);
padding: 0;
margin: 0;
transition: padding-top 0.4s ease; /* DÜZELTME: İçerik kaymasını yumuşatmak için eklendi */
}/* Menü açıkken veya arama açıkken arkaplan kaymasını engelle */
body.menu-open {
overflow: hidden;
}svg {
width: 30px;
height: 30px;
display: block; /* DÜZELTME: Alt boşluk sorunlarını engeller */
}/* =========================================
HEADER ANA YAPI
========================================= */
.header-menu {
width: 100%;
position: fixed;
z-index: 999;
background: #fff;
top: 0;
left: 0;
}
.header-menu * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.header-menu a {
text-decoration: none;
transition: all 0.3s ease;
}
.header-menu ul {
list-style: none;
}.header-menu .header-container {
max-width: 1600px;
margin: 0 auto;
padding: 0 30px;
}.header-menu .header-divider {
color: #a0aab5;
font-weight: 300;
margin: 0 15px;
user-select: none;
}/* =========================================
1. ÜST GRİ BAR (TOP BAR)
========================================= */
.header-menu .header-top-bar {
background-color: #0048110d;
border-bottom: 1px solid #0048111f;
width: 100%;
transition:
max-height 0.4s ease,
opacity 0.4s ease,
padding 0.4s ease; /* DÜZELTME: Yumuşak geçiş için */
max-height: 50px;
overflow: hidden;
}
.header-menu .top-flex {
display: flex;
justify-content: flex-end; /* DÜZELTME: justify-content: end; yerine flex-end daha uyumludur */
align-items: center;
height: 38px;
}.header-menu .header-dil {
display: flex;
align-items: center;
}
.header-dil svg {
height: 16px;
stroke: #024810;
margin-right: 5px;
}
.header-menu .header-dil li:first-child::before {
display: none;
}
.header-menu .header-dil li::before {
content: "";
display: block;
width: 1px;
height: 15px;
background: #02481056;
margin: 0 5px;
}
.header-menu .header-dil li {
display: flex;
align-items: center;
}
.header-menu .header-dil a {
font-size: 12px;
font-weight: 700;
color: #024810;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.header-menu .header-dil a:hover {
color: #a98747;
}.header-menu .header-top-links {
display: flex;
align-items: center;
}
.header-menu .header-top-links li {
display: flex;
align-items: center;
}
.header-menu .header-top-links a {
font-size: 11px;
font-weight: 700;
color: #024810;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.header-menu .header-top-links a:hover {
color: #a98747;
}/* =========================================
2. ANA BEYAZ BAR (MAIN BAR)
========================================= */
.header-menu .header-main-bar {
background-color: #ffffff;
width: 100%;
}
.header-menu .main-flex {
display: flex;
justify-content: space-between;
align-items: center;
height: 85px;
transition: height 0.4s ease;
}
.header-menu .header-logo-desktop img {
max-height: 45px;
width: auto;
transition: max-height 0.4s ease;
}/* Ana Menü */
.header-menu .header-main-nav {
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
}
.header-menu .header-main-links {
display: flex;
align-items: center;
}
.header-menu .header-main-links li {
display: flex;
align-items: center;
}
.header-menu .header-main-links li.ana-sayfa-gizle {
/* Opsiyonel: Sadece anasayfa linkini gizlemek isterseniz ilgili li'ye bu classı verin */
display: none;
}
.header-menu .header-main-links a {
font-size: 13.6px;
font-weight: 700;
color: #024810;
text-transform: uppercase;
padding: 10px 15px;
display: flex;
align-items: center;
letter-spacing: 0.5px;
}
.header-menu .header-main-links a:hover {
color: #a98747;
}/* Arama İkonu */
.header-menu .header-search-icon a {
padding: 0 15px;
}
.header-menu .header-search-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: #024810;
stroke-width: 2;
transition: stroke 0.3s;
}
.header-menu .header-search-icon:hover svg {
stroke: #a98747;
}/* Ürün Talep Butonu */
.header-menu .header-action-btn {
background-color: #ffffff;
color: #a98747;
border: 2px solid #a98747;
font-size: 13px;
font-weight: 700;
padding: 10px 24px;
border-radius: var(--radius);
margin-left: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition:
padding 0.4s ease,
background-color 0.3s ease,
color 0.3s ease;
}
.header-menu .header-action-btn:hover {
background-color: #a98747;
color: #ffffff;
}/* =========================================
SABİTLEME (STICKY) VE DARALMA EFEKTİ
========================================= */
.header-menu.scrolled {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.header-menu.scrolled .header-top-bar {
max-height: 0;
opacity: 0;
padding: 0;
border: none;
}
.header-menu.scrolled .main-flex {
height: 65px;
}
.header-menu.scrolled .header-logo-desktop img {
max-height: 32px;
}
.header-menu.scrolled .header-action-btn {
padding: 8px 20px;
}/* =========================================
MOBİL TASARIM (max-width: 1150px)
========================================= */
.header-menu .header-menu-mobile-top {
display: none; /* Masaüstünde gizli */
}@media (max-width: 1150px) {
/* YENİ: Sabit mobil header'ın altına içerik girmesin diye body'e üstten boşluk veriyoruz. */
body {
padding-top: 65px;
}
.header-menu.scrolled body {
padding-top: 55px; /* Daralınca boşluk da azalır */
}/* Masaüstü header yapısını sıfırla */
.header-menu {
padding-top: 0; /* Header'ın kendi padding'i olmamalı */
}/* Mobil üst sabit barı göster ve ayarla */
.header-menu .header-menu-mobile-top {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed; /* YENİ: Konumunu header-menu'den buraya aldık */
top: 0;
left: 0;
width: 100%;
height: 65px;
background-color: #fff;
padding: 0 20px;
z-index: 1002;
border-bottom: 1px solid #eee;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition:
height 0.4s ease,
box-shadow 0.4s ease;
}
.header-menu .header-logo-mobile img {
max-height: 35px;
transition: max-height 0.4s ease;
}/* Hamburger Buton */
.header-menu .header-hamburger {
background: none;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px; /* Tıklama alanını genişlet */
}
.header-menu .header-hamburger span {
width: 25px;
height: 3px;
background-color: #024810;
border-radius: 2px;
transition: all 0.3s ease-in-out;
}/* Menü Konteynerini Yandan Açılan Panele Çevir */
.header-menu .header-menu-wrapper {
position: fixed;
top: 0; /* DÜZELTME: Ekranın en üstünden başlasın */
right: 0;
width: 320px;
max-width: 85%; /* Ekran çok dar ise taşmasın */
height: 100vh; /* Tam ekran yüksekliği */
background-color: #fff;
z-index: 1001;
display: flex;
flex-direction: column;
overflow-y: auto;
padding-top: 65px; /* DÜZELTME: Mobil top bar kadar boşluk bırak */
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
/* DÜZELTME: Daha akıcı animasyon için transform kullan */
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
}
.header-menu .header-menu-wrapper.active {
transform: translateX(0);
}/* İçeriklerin dikey hizalanması */
.header-menu .header-main-bar {
order: 1;
border: none;
box-shadow: none;
}
.header-menu .header-top-bar {
order: 2;
background: #f9f9f9;
border-top: 1px solid #eee;
max-height: none; /* DÜZELTME: Mobilde yükseklik limiti olmasın */
opacity: 1;
}
.header-menu .main-flex,
.header-menu .top-flex {
height: auto;
padding: 20px;
flex-direction: column;
align-items: flex-start;
}
.header-menu .header-logo-desktop,
.header-menu .header-divider,
.header-menu .header-search-icon {
display: none;
}.header-menu .header-main-nav,
.header-menu .header-main-links,
.header-menu .header-top-links {
flex-direction: column;
width: 100%;
align-items: flex-start;
}
.header-menu .header-main-links li,
.header-menu .header-top-links li {
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
.header-menu .header-main-links a,
.header-menu .header-top-links a {
width: 100%;
padding: 15px 0;
font-size: 14px;
}
.header-menu .header-action-btn {
width: 100%;
text-align: center;
margin: 20px 0 0 0;
background: #a98747;
color: #fff;
padding: 15px;
}/* Hamburger Animasyonu (X Şekli) */
.header-menu .header-hamburger.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.header-menu .header-hamburger.active span:nth-child(2) {
opacity: 0;
}
.header-menu .header-hamburger.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}/* Scroll durumunda mobil header'ın daralması */
.header-menu.scrolled .header-menu-mobile-top {
height: 55px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.header-menu.scrolled .header-logo-mobile img {
max-height: 28px;
}
.header-menu.scrolled .header-menu-wrapper {
padding-top: 55px; /* DÜZELTME: Daralan header'a uyum sağla */
}
}/* =========================================
TAM EKRAN ARAMA (SEARCH OVERLAY)
========================================= */
.header-search-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; /* vh yerine % daha uyumlu olabilir */
background-color: #004811c0;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s ease,
visibility 0s linear 0.4s;
}
.header-search-overlay.active {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}.search-close-btn {
position: absolute;
top: 30px;
right: 40px;
background: none;
border: none;
cursor: pointer;
z-index: 2001;
transition: transform 0.3s ease;
}
.search-close-btn svg {
width: 40px;
height: 40px;
fill: #ffffff;
transition: fill 0.3s ease;
}
.search-close-btn:hover {
transform: rotate(90deg);
}.search-overlay-content {
width: 100%;
max-width: 800px;
padding: 0 20px;
text-align: center;
transform: translateY(40px);
opacity: 0;
transition:
transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s,
opacity 0.5s ease 0.1s;
}
.header-search-overlay.active .search-overlay-content {
transform: translateY(0);
opacity: 1;
}.search-title {
color: #a0aab5;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
font-weight: 300;
}
.search-overlay-form {
position: relative;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
padding-bottom: 10px;
transition: border-color 0.3s ease;
}
.search-overlay-form:focus-within {
border-bottom-color: #a98747;
}.search-overlay-input {
width: 100%;
background: none;
border: none;
color: #ffffff;
font-size: 40px;
font-weight: 700;
padding: 10px 0;
outline: none;
}
.search-overlay-input::placeholder {
color: rgba(255, 255, 255, 0.2);
}.search-overlay-submit {
background: none;
border: none;
cursor: pointer;
padding: 0 10px;
}
.search-overlay-submit svg {
width: 40px;
height: 40px;
fill: #ffffff;
}
.search-overlay-submit:hover svg {
fill: #a98747;
}.search-hint {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
margin-top: 20px;
font-weight: 300;
}@media (max-width: 768px) {
.search-overlay-input {
font-size: 24px;
}
.search-close-btn {
top: 20px;
right: 20px;
}
.search-close-btn svg {
width: 30px;
height: 30px;
}
.search-overlay-submit svg {
width: 30px;
height: 30px;
}
}/* =========================================
WHATSAPP VE MOBİL ALT BUTONLAR
========================================= */
a.WhatsApp1 {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
background: #2eb843;
font-weight: 600;
width: 51px;
height: 51px;
position: fixed;
bottom: 20px;
left: 20px;
border-radius: 50%;
transition: all 0.2s ease;
color: #fff;
animation: whatsapp infinite 2s linear;
z-index: 999;
}
a.WhatsApp1 svg {
fill: #fff;
width: 24px;
height: 24px;
}@keyframes whatsapp {
0% {
box-shadow: 0 0 0 0 #2eb843;
}
50% {
box-shadow: 0 0 0 10px #2eb84300;
}
100% {
box-shadow: 0 0 0 0 #2eb84300;
}
}.mobilbuttonlar {
display: none; /* Masaüstünde tamamen gizli */
}@media (max-width:1200px) {
.header-divider {
display: none!important;
}
/* Mobilde WhatsApp butonunu alt barın üstüne alalım */
a.WhatsApp1 {
bottom: 70px; /* 50px (bar yüksekliği) + 20px boşluk */
}.mobilbuttonlar {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 998; /* WhatsApp'ın altında */
display: flex;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.mobilbuttonlar .btn {
flex: 1; /* Butonların eşit genişlikte olmasını sağlar */
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 12px 10px;
border: none;
}
.mobilbuttonlar .btn svg {
width: 24px;
height: 24px;
fill: currentColor;
}.btn1 {
background: #a98747;
color: #fff;
}
.btn2 {
background: #896c34;
color: #fff;
}
.btn3 {
background: #745a28;
color: #fff;
}
}