:root {
--font1: "Montserrat", Helvetica, Arial, sans-serif;
--primary-orange: #B89950;
--radius: 3px;
}body {
font-family: var(--font1);
padding: 0px;
margin: 0px;
}body.menu-open {
overflow: hidden;
}/* Temel Ayarlar */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}/* Genel Ayarlar & Kapsayıcı */
* {
box-sizing: border-box;
}.header-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: transform 0.4s ease-in-out;
/* YENİ: Yumuşak kayma efekti için */}.header-wrapper.header-hidden {
transform: translateY(-100%);
}.header-wrapper.header-scrolled .site-header {
background-color: #0c0c0c;
/* Siyah arkaplan */
height: 70px;
/* Orjinal 85px'den 70px'e küçülür */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
/* Şık bir alt gölge efekti */
}.top-bar {
background-color: #9b9b9b;
color: #ffffff;
text-align: center;
padding: 10px 0;
font-size: 12px;
letter-spacing: 1.5px;
}/* --- ÜST HEADER ALANI --- */
.site-header {
position: relative;
width: 100%;
height: 85px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4%;
transition: all 0.4s ease;
z-index: 1001;
/* Menünün üzerinde kalması için */
}/* Header kapalıyken arka plan şeffaflığı (isteğe bağlı) */
body.menu-open .site-header {
background-color: transparent;
backdrop-filter: none;
}/* --- SOL: Menü İkonu ve Yazısı --- */
.header-left {
flex: 1;
/* Ortalamanın kusursuz olması için esneme alanı */
display: flex;
align-items: center;
}.menu-toggle {
display: flex;
align-items: center;
gap: 15px;
background: none;
border: none;
cursor: pointer;
color: #fff;
padding: 5px 0;
}.menu-toggle .hamburger {
display: flex;
flex-direction: column;
gap: 5px;
}.menu-toggle .hamburger .bar {
display: block;
width: 26px;
height: 2px;
background-color: #fff;
transition: all 0.4s ease;
}/* Çarpı animasyonu */
.menu-toggle.is-active .hamburger .bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}.menu-toggle.is-active .hamburger .bar:nth-child(2) {
opacity: 0;
}.menu-toggle.is-active .hamburger .bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}.menu-toggle .menu-text {
font-size: 13px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
transition: color 0.3s ease;
}.menu-toggle:hover .menu-text {
color: #d1bfae;
}/* --- ORTA: Logo Tam Merkezde --- */
.header-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
top: 15px
}.header-center .logo img {
height: 90px;
/* Logoya uygun yükseklik */
width: auto;
display: block;
transition: height 0.4s ease;
/* YENİ: Küçülme animasyonu için */}.header-wrapper.header-scrolled .header-center .logo img {
height: 55px;
margin-top: -9px;
/* Kaydırıldığında logonun küçüleceği boyut */
}.header-wrapper.header-scrolled .top-bar {
background-color: #000000;
transition: background-color 0.4s ease;
}/* --- SAĞ: Sosyal Medya ve Dil --- */
.header-right {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}.social-icons {
display: flex;
gap: 20px;
}.social-icons a {
color: #fff;
font-size: 16px;
text-decoration: none;
transition: transform 0.3s ease, color 0.3s;
}.social-icons a svg {
width: 13px;
height: 13px;
fill: #fff;
opacity: 80%;
}.social-icons a:hover {
color: #fff;
opacity: 100%;
transform: translateY(-2px);
}.language-selector {
display: flex;
align-items: center;
font-size: 13px;
letter-spacing: 1px;
gap: 10px;
border-left: 1px solid rgba(255, 255, 255, 0.4);
padding-left: 15px;
}.language-selector li {
list-style: none;
}.language-selector a {
color: #fff !important;
text-decoration: none;
opacity: 80%;}.language-selector a .icon {
display: none;
}.language-selector a:hover {
opacity: 1;
}.language-selector .divider {
height: 12px;
width: 1px;
background-color: rgba(255, 255, 255, 0.4);
margin: 0 10px;
}/* =========================================
YENİ TAM EKRAN SİYAH MENÜ (EFEKTLİ ALAN)
========================================= */
.fullscreen-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #0c0c0c;
/* Şık siyah arka plan */
z-index: 1000;
/* Header'ın bir tık altında (header hep görünsün) */
padding-top: 120px;
/* Header ve top bar yüksekliği kadar boşluk */
opacity: 0;
visibility: hidden;
/* Yukarıdan zarifçe kayarak gelme efekti */
transform: translateY(-50px) scale(0.98);
transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}/* JS tarafından tetiklendiğinde açılır */
.fullscreen-menu.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}/* Sol (Linkler) ve Sağ (Görsel) Düzeni */
.menu-container {
display: flex;
width: 100%;
height: 100%;
max-width: 1600px;
margin: 0 auto;
}.menu-left {
width: 50%;
padding: 0 5%;
display: flex;
flex-direction: column;
justify-content: center;
}.menu-right {
width: 50%;
height: 80%;
margin: auto 0;
padding-right: 4%;
}.menu-right img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
/* İsteğe bağlı, resmi hafif yuvarlatır */
opacity: 0.8;
}/* Menü İçindeki Linklerin Şık Görünümü */
.nav-list {
list-style: none;
padding: 0;
margin: 0;
}.nav-list li {
margin-bottom: 25px;
}.nav-list li a {
color: #ffffff;
font-size: 28px;
font-weight: 500;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 15px;
position: relative;
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}.nav-list li a::after {
content: "";
position: absolute;
top: 50%;
right: -60px;
/* Yazının bitiminden ne kadar sağda duracağı */
width: 45px;
/* Okun genişliği */
height: 12px;
/* Okun yüksekliği *//* CSS içine gömülü ince ve şık SVG oku */
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='45' height='12' viewBox='0 0 45 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6H43M43 6L38 1M43 6L38 11' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;/* Başlangıçta görünmez ve 20px solda durur */
opacity: 0;
transform: translateY(-50%) translateX(-20px);
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}/* Üzerine gelindiğinde (Hover) ok görünür ve sağa doğru kayarak yerine oturur */
.nav-list li a:hover::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}.nav-list li a svg {
width: 24px;
height: 24px;
fill: currentColor;
}.nav-list li a:hover {
color: #d1bfae;
padding-left: 10px;
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);/* Üzerine gelince zarifçe sağa kayar */
}/* Eğer link içinde Twig'den gelen ikon varsa */
.nav-list li a svg {
width: 24px;
height: 24px;
fill: currentColor;
}/* İçinden gelen istenmeyenleri gizle */
.nav-list .mobil-logo {
display: none !important;
}/* --- Alt Menü (Açılır Kapanır / Akordiyon Yapısı) --- */
.nav-list .nav-submenu {
position: relative;
}.nav-list .nav-submenu>ul {
max-height: 0;
overflow: hidden;
padding-left: 30px;
/* Alt menüleri içeri girintili yapar */
transition: max-height 0.5s ease;
}.nav-list .nav-submenu.submenu-open>ul {
max-height: 500px;
/* Alt menü açılma limiti */
margin-top: 15px;
}/* Alt menü oku */
.nav-list .nav-submenu>a::after {
content: "+";
font-size: 24px;
margin-left: auto;
/* Oku sağa yaslar */
transition: transform 0.4s ease;
}.nav-list .nav-submenu.submenu-open>a::after {
transform: rotate(45deg);
/* Açılınca X harfine dönüşür */
}/* Alt menü linkleri */
.nav-list .nav-submenu ul a {
font-size: 18px;
/* Alt menü yazıları daha küçük */
font-weight: 400;
color: #aaaaaa;
}.nav-list .nav-submenu ul a:hover {
color: #ffffff;
padding-left: 10px;
}/* =========================================
MOBİL GÖRÜNÜM (Tablet & Telefon)
========================================= */
@media (max-width: 1024px) {
.site-header {
padding: 0 20px;
height: 75px;
}/* Mobilde sağdaki Sosyal ve Dil Seçimi çok yer kaplamasın */
.header-right .social-icons {
display: none;
}.header-right {
gap: 10px;
}.menu-toggle .menu-text {
display: none;
}/* Mobilde "MENÜ" yazısını gizle, sadece ikon kalsın */.menu-container {
flex-direction: column;
margin-top: 90px;
}.menu-left {
width: 100%;
height: auto;
padding: 20px 20px 50px 20px;
overflow-y: auto;
}.nav-list li a {
font-size: 24px;
}/* Mobilde resmi gizleyebilirsiniz veya aşağıya koyabilirsiniz. Gizlemeyi tercih ettim: */
.menu-right {
display: none;
}
}a.WhatsApp1 {
display: flex;
font-size: 18px;
background: #2eb843;
font-weight: 600;
width: 51px;
height: 51px;
position: fixed;
bottom: 20px;
right: 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;
}
}a.WhatsApp1 svg {
width: 24px;
height: 24px;
fill: #fff
}.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: #B89950;
border-color: #B89950;
color: #fff;
}.btn2 {
background: #95793a;
border-color: #95793a;
color: #fff;
}.btn3 {
background: #7b622a;
border-color: #7b622a;
color: #fff;
}
}