:root {
--font2: "Google Sans", Helvetica, Arial, sans-serif;
--primary-orange: #AD130D;
--radius: 3px;
}body {
font-family: var(--font2);
padding: 0px;
margin: 0px;
}body.menu-open {
overflow: hidden;
}svg {
width: 20px;height: 20px;
}/* --- Değişkenler ve Genel Ayarlar --- */
:root {
--header-bg: #0d0e0b;
--primary-red: #ad130d;
--text-white: #ffffff;
--text-muted: #a1a3a6;
--border-color: rgba(255, 255, 255, 0.08);
}/* --- .header-menu Temel Kapsayıcı --- */
.header-menu {
position: fixed;
width: 100%;
background-color: var(--header-bg);
z-index: 1000;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
top: 0px;
}.header-menu .container {
max-width: 1350px;
margin: 0 auto;
padding: 0 20px;
}/* --- Üst Bölüm (Masaüstü) --- */
.header-menu .header-top {
border-bottom: 1px solid var(--border-color);
}.header-menu .top-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 90px;
}.header-menu .logo img {
height: 65px;
width: auto;
display: block;
}/* Ana Menü */
.header-menu .main-nav {
flex-grow: 1;
display: flex;
justify-content: center;
}.header-menu ul#main-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 30px;
}.header-menu ul#main-menu li:nth-child(1) a {
display: none;
}.header-menu ul#main-menu li a {
color: var(--text-white);
text-decoration: none;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
transition: color 0.3s ease;
padding: 10px 0;
position: relative;
}.header-menu ul#main-menu li a:hover {
color: var(--primary-red);
}/* Aksiyon Alanı (Telefon & Buton) */
.header-menu .header-actions {
display: flex;
align-items: center;
gap: 25px;
}.header-menu .phone-wrap {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-white);
}.header-menu .phone-wrap svg {
color: var(--text-muted);
}
.header-menu .phone-wrap a {
color: var(--text-white);
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
.header-menu .phone-wrap a:hover {
color: var(--primary-red);
}.header-menu .btn-talep {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--primary-red);
color: var(--text-white);
text-decoration: none;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
}
.header-menu .btn-talep:hover {
background-color: #8f0f0a;
transform: translateY(-2px);
}/* --- Alt Bölüm (Hizmetler Barı - Masaüstü) --- */
.header-menu .header-bottom {
background-color: rgba(255, 255, 255, 0.02);
}.header-menu .services-nav {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 60px;
padding: 10px 0;
flex-wrap: wrap;
gap: 15px;
}.header-menu .service-item {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text-muted);
transition: all 0.3s ease;
}
.header-menu .service-item svg {
width: 20px;
height: 20px;
transition: all 0.3s ease;
}
.header-menu .service-item span {
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
}
.header-menu .service-item:hover {
color: var(--primary-red);
}
.header-menu .service-item:hover svg {
stroke: var(--primary-red);
transform: scale(1.1);
}/* --- Mobil Menü Butonu (Hamburger) --- */
.header-menu .mobile-toggle {
display: none;
background: transparent;
border: none;
cursor: pointer;
flex-direction: column;
gap: 6px;
padding: 10px;
z-index: 1001;
}.header-menu .mobile-toggle span {
display: block;
width: 26px;
height: 2px;
background-color: var(--text-white);
transition: all 0.4s ease;
}/* --- MOBİL GÖRÜNÜM (1100px ve Altı) --- */
@media (max-width: 1100px) {
/* Kapalı Durumda Gizlenecekler */
.header-menu .main-nav,
.header-menu .header-actions,
.header-menu .header-bottom {
display: none;
}.header-menu .mobile-toggle {
display: flex; /* Hamburgeri Göster */
}.header-menu .top-container {
height: 75px;
flex-wrap: wrap; /* Menü açılınca alta inebilmeleri için */
}/* ---- MENÜ AÇIK DURUMU (is-open Classı Eklendiğinde) ---- */
.header-menu.is-open {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow-y: auto; /* İçerik taşarsa kaydırılsın */
}.header-menu.is-open .header-top {
border-bottom: none;
}/* 1. Üst Ana Menü Bölümü */
.header-menu.is-open .main-nav {
display: flex;
width: 100%;
order: 3; /* Logonun altına at */
padding: 30px 0;
border-top: 1px solid var(--border-color);
animation: fadeIn 0.4s ease forwards;
}.header-menu.is-open ul#main-menu {
flex-direction: column;
width: 100%;
text-align: center;
gap: 20px;
}.header-menu.is-open ul#main-menu li a {
font-size: 18px;
display: inline-block;
}/* 2. Orta İletişim & Aksiyon Bölümü */
.header-menu.is-open .header-actions {
display: flex;
width: 100%;
order: 4; /* Ana Menünün altına at */
flex-direction: column;
justify-content: center;
padding-bottom: 30px;
animation: fadeIn 0.5s ease forwards;
}/* 3. Alt Hizmetler Bölümü */
.header-menu.is-open .header-bottom {
display: block;
background: transparent;
border-top: 1px solid var(--border-color);
animation: fadeIn 0.6s ease forwards;
}.header-menu.is-open .services-nav {
flex-direction: column;
align-items: center;
gap: 15px;
padding: 30px 0;
}/* Mobil Hizmet Kartları (Şık Kutu Tasarımı) */
.header-menu.is-open .service-item {
width: 100%;
max-width: 300px;
justify-content: flex-start;
padding: 14px 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 15px;
}.header-menu.is-open .service-item:hover {
background: rgba(173, 19, 13, 0.08); /* Hafif kırmızı zemin */
border-color: rgba(173, 19, 13, 0.3);
}/* Hamburger İkonu Çarpı (X) Animasyonu */
.header-menu.is-open .mobile-toggle span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.header-menu.is-open .mobile-toggle span:nth-child(2) {
opacity: 0;
}
.header-menu.is-open .mobile-toggle span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}.header-bottom {
display: none !important;
}
}@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}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;
}
}a.WhatsApp1 svg {
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: #ad130d;
border-color: #ad130d;
color: #fff;
}.btn2 {
background: #8e0e09;
border-color: #8e0e09;
color: #fff;
}.btn3 {
background: #760b06;
border-color: #760b06;
color: #fff;
}
}/* Alt Menü Kapsayıcı */
.service-wrapper {
position: relative;
display: flex;
align-items: center;
}/* Ok İkonu Stili */
.chevron-icon {
margin-left: 5px;
transition: transform 0.3s ease;
opacity: 0.6;
}.service-wrapper:hover .chevron-icon {
transform: rotate(180deg);
}/* Alt Menü Listesi (Masaüstü) */
.sub-service-menu {
position: absolute;
top: 150%;
left: 0;
background: #1a1b17; /* Biraz daha açık bir siyah/gri */
min-width: 220px;
list-style: none;
padding: 10px 0;
margin: 0;
border-radius: 4px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
border: 1px solid var(--border-color);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1100;
}.service-wrapper:hover .sub-service-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}/* Alt Menü Linkleri */
.sub-service-menu li a {
display: block;
padding: 10px 20px;
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
transition: all 0.2s ease;
border-bottom: 1px solid rgba(255,255,255,0.03);
}.sub-service-menu li:last-child a {
border-bottom: none;
}.sub-service-menu li a:hover {
color: var(--text-white);
padding-left: 25px; /* Hafif kayma efekti */
}/* --- MOBİL UYUMLULUK (1100px Altı) --- */
@media (max-width: 1100px) {
.service-wrapper {
flex-direction: column;
width: 100%;
max-width: 300px; /* Sizin mevcut mobildeki genişliğinizle uyumlu */
}.header-menu.is-open .sub-service-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: rgba(255,255,255,0.02);
width: 100%;
padding: 0;
margin-top: 5px;
display: none; /* Mobilde tıklayınca açılması için veya isterseniz hep açık kalsın */
}/* Mobilde alt menülerin görünmesi için hover yerine "is-open" mantığı kullanılabilir
veya direkt görünür yapalım: */
.service-wrapper:hover .sub-service-menu {
display: block;
}.header-menu.is-open .sub-service-menu li a {
padding: 12px 40px; /* İçeriden daha fazla boşluk */
font-size: 14px;
text-align: left;
}
}