/* --- GENEL AYARLAR --- */
:root {
--font1: "Onest", Helvetica, Arial, sans-serif;
--primary-green: #5dac12;
--s1-accent: #5dac12;
--primary-orange: #5dac12;
--header1-white: #ffffff;
--header1-dark: #0b1a4a;
--renk2: #5dac12;
--header1-accent: #0047ff;
--header1-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}body {
font-family: var(--font1);
padding: 0;
margin: 0;
/* Sabit menü olduğu için içeriğin üstten kapanmaması adına padding */
padding-top: 70px;
}body.menu-open {
overflow: hidden;
}/* --- HEADER ANA YAPI (SABİT VE BEYAZ) --- */
.header1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 12px 0;
background-color: var(--header1-white) !important; /* Zemin hep beyaz */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Hafif gölge */
transition: var(--header1-transition);
}.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}.header1-container {
display: flex;
align-items: center;
justify-content: space-between;
}/* --- LOGO GEÇİŞ MANTIĞI --- */
/* Beyaz zeminde renkli logonun (birinci logo) görünmesi sağlanır */
.header1-logo-img {
width: auto;
height: 50px;
transition: var(--header1-transition);
object-fit: contain;
}.header1 .header1-logo-img:nth-child(1) {
display: block; /* İlk logoyu göster */
}
.header1 .header1-logo-img:nth-child(2) {
display: none; /* İkinci (beyaz) logoyu gizle */
}/* --- NAVİGASYON (MENÜ) --- */
.header1-nav {
margin-left: auto;
margin-right: 25px;
}.header1-nav-list {
display: flex;
align-items: center;
list-style: none;
gap: 20px;
margin: 0;
padding: 0;
}/* HTML yapınızdaki ilk boş li elemanını gizlemek için */
.header1-nav-list li:nth-child(1) {
display: none;
}.header1-nav-list li a {
text-decoration: none;
color: var(--header1-dark); /* Yazılar koyu renk */
font-size: 15px;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
transition: var(--header1-transition);
}.header1-nav-list li:first-child{
display: block !important;
}.header1-nav-list li a:hover {
color: var(--renk2);
}.header1-divider {
width: 1px;
height: 24px;
background-color: rgba(0, 0, 0, 0.1);
margin: 0 10px;
}/* --- BUTONLAR --- */
.header1-actions {
display: flex;
align-items: center;
}.header1-phone-btn {
text-decoration: none;
color: var(--header1-dark);
border: 1px solid var(--header1-dark);
padding: 8px 16px;
border-radius: 8px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
transition: var(--header1-transition);
}.header1-phone-btn:hover {
background-color: var(--header1-dark);
color: #fff;
}.header1-phone-icon {
width: 18px;
fill: currentColor;
}.header1-signin-btn {
text-decoration: none;
background-color: var(--header1-accent);
color: white;
padding: 10px 24px;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
margin-left: 15px;
transition: var(--header1-transition);
}.header1-signin-btn:hover {
opacity: 0.9;
box-shadow: 0 4px 12px rgba(0, 71, 255, 0.3);
}/* --- MOBİL BURGER --- */
.header1-burger {
display: none;
flex-direction: column;
gap: 6px;
cursor: pointer;
z-index: 1100;
}.header1-burger span {
width: 30px;
height: 3px;
background: var(--header1-dark);
transition: 0.3s;
}/* --- RESPONSIVE TASARIM --- */
@media (max-width: 1100px) {
body { padding-top: 70px; }.header1-nav {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100vh;
background: var(--header1-white);
padding: 80px 40px;
transition: 0.4s;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
display: block;
margin: 0;
}.header1-nav.active {
right: 0;
}.header1-divider {
display: none;
}.header1-nav-list {
flex-direction: column;
align-items: flex-start;
}.header1-nav-list li a {
color: var(--header1-dark) !important;
font-size: 20px;
}.header1-burger {
display: flex;
}.header1-actions {
display: none;
}
}/* --- WHATSAPP BUTONU --- */
a.WhatsApp1 {
display: flex;
font-size: 18px;
background: #2eb843;
width: 55px;
height: 55px;
position: fixed;
bottom: 20px;
left: 20px;
border-radius: 50%;
transition: all 0.3s ease;
color: #fff;
align-items: center;
justify-content: center;
animation: whatsapp infinite 2s linear;
z-index: 9999;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}@keyframes whatsapp {
0% { box-shadow: 0 0 0 0 #2eb843; }
50% { box-shadow: 0 0 0 10px rgba(46, 184, 67, 0); }
100% { box-shadow: 0 0 0 0 rgba(46, 184, 67, 0); }
}a.WhatsApp1 svg {
width: 28px;
height: 28px;
fill: #fff;
}/* --- MOBİL ALT AKSİYON BUTONLARI --- */
.mobilbuttonlar {
display: none;
}@media (max-width: 1200px) {
a.WhatsApp1 {
bottom: 75px;
}.mobilbuttonlar {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 999;
display: flex;
}.mobilbuttonlar .btn {
border-radius: 0;
display: flex;
justify-content: center;
align-items: center;
padding: 15px 20px;
width: 100%;
text-decoration: none;
}.mobilbuttonlar .btn svg {
width: 24px;
height: 24px;
fill: #fff;
}.btn1 { background: #5dac12; }
.btn2 { background: #4f940d; }
.btn3 { background: #3c7208; }
}/* --- YUKARI ÇIK BUTONU --- */
#yukaricik {
position: fixed;
bottom: 85px;
right: 20px;
background: var(--header1-dark);
color: #fff;
width: 45px;
height: 45px;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 999;
transition: 0.3s;
}#yukaricik:hover {
background: var(--renk2);
}/* --- SOL SABİT BUTONLAR TASARIMI --- */
.sol-sabit-butonlar {
position: fixed;
left: 0;
bottom: -20px;
transform: translateY(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 5px; /* İki buton arası boşluk */
}.sol-btn {
display: flex;
align-items: center;
text-decoration: none;
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 10px 15px 10px 10px;
border-radius: 0 8px 8px 0; /* Sağ köşeler oval */
transition: all 0.3s ease;
box-shadow: 3px 0 10px rgba(0,0,0,0.1);
min-width: 140px; /* Butonların genişliğini sabit tutar */
}.sol-btn .sol-ikon {
background: rgba(255, 255, 255, 0.2);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin-right: 10px;
}.sol-btn svg {
width: 18px;
height: 18px;
fill: #fff;
}/* Renkler */
.whatsapp-acik {
background: var(--s1-accent); /* WhatsApp Yeşili */
}.iletisim-acik {
background: var(--header1-accent); /* Header Koyu Renk */
}/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
.sol-sabit-butonlar {
top: auto;
bottom: 80px; /* Mobilde alt butonların üzerine çeker */
}.sol-btn {
min-width: auto;
padding: 8px 12px;
font-size: 12px;
}.sol-btn span {
display: none; /* Mobilde çok yer kaplamaması için sadece ikon kalsın derseniz burayı bırakın */
}
/* Eğer mobilde de YAZILAR AÇIK kalsın istiyorsanız yukarıdaki "display: none" satırını silin ve şunları ekleyin: */
/*
.sol-btn span { display: block; }
.sol-btn { min-width: 120px; }
*/
}
/* --- MEGA MENU: PREMİUM & MODERN TASARIM --- */
.nav-submenu { position: relative; }.mega-modern-container {
position: absolute;
top: 100%;
left: -20%;
transform: translateX(-50%);
width: 95vw; /* Ekranın %95'ini kaplar */
max-width: 1400px;
background: #ffffff;
box-shadow: 0 15px 50px rgba(0,0,0,0.1);
border-radius: 0 0 20px 20px;
display: none;
padding: 25px 20px !important;
z-index: 9999;
border-top: 5px solid #0056b3;
/* 6 Sütunlu Yan Yana Yapı */
display: none; /* JS/Hover ile açılır */
grid-template-columns: repeat(6, 1fr);
gap: 25px;
}/* Menü Üzerine Gelince */
.nav-submenu:hover .mega-modern-container {
display: grid !important;
animation: megaFadeIn 0.3s ease-out;
}@keyframes megaFadeIn {
from { opacity: 0; transform: translate(-50%, 10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}/* Kategori Sütunları */
.mega-modern-card {
list-style: none !important;
border-right: 1px solid #f0f0f0;
padding-right: 15px;
}
.mega-modern-card:last-child { border-right: none; }/* Kategori Başlıkları (Süslü) */
.mega-modern-header {
display: flex !important;
flex-direction: column; /* İkon üstte, yazı altta */
align-items: flex-start;
gap: 8px;
padding-bottom: 15px !important;
color: #333 !important;
font-weight: 800 !important;
font-size: 13px !important;
text-transform: uppercase;
text-decoration: none;
position: relative;
letter-spacing: 0.5px;
}/* Başlık Altındaki Renkli Çizgi */
.mega-modern-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 3px;
background: #0056b3;
transition: width 0.3s;
}
.mega-modern-card:hover .mega-modern-header::after { width: 60px; }/* İkon Tasarımı */
.mega-icon-wrapper {
background: #f4f7fa;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
transition: 0.3s;
margin-bottom: 5px;
}
.mega-modern-card:hover .mega-icon-wrapper {
background: #0056b3;
transform: translateY(-3px);
}
.mega-icon-wrapper svg {
width: 24px;
height: 24px;
fill: #0056b3;
transition: 0.3s;
}
.mega-modern-card:hover .mega-icon-wrapper svg { fill: #fff; }/* Alt Linkler */
.mega-sub-list {
margin-top: 15px !important;
list-style: none !important;
padding: 0 !important;
}
.mega-modern-item {
color: #555 !important;
font-size: 13.5px !important;
text-decoration: none !important;
padding: 6px 0 !important;
display: block !important;
font-weight: 500 !important;
transition: 0.2s;
}
.mega-modern-item:hover {
color: #0056b3 !important;
padding-left: 5px !important;
}/* MOBİL TASARIM */
@media (max-width: 1100px) {
.mega-modern-container {
grid-template-columns: 1fr; /* Mobilde alt alta */
position: static;
width: 100% !important;
transform: none;
padding: 20px !important;
}
.mega-modern-card { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 15px; }
}/* Masaüstünde hover ile açılsın ama tıklama sayfaya gitsin */
.nav-submenu:hover > .mega-modern-container {
display: grid !important;
}/* Mobilde açılır menü tıklamayı engelliyorsa veya karmaşa yaratıyorsa gizleyebilir
ya da sadece hover/uzun basma durumuna bırakabilirsiniz. */
@media (max-width: 1100px) {
/* Mobilde alt menüleri tamamen kapatmak ve direkt linki aktif etmek için: */
.header1-nav.active .mega-modern-container {
display: none !important; /* Mobilde açılır menüyü iptal eder, sadece link çalışır */
}
/* Eğer mobilde hem link çalışsın hem alt menü altta görünsün isterseniz: */
/* .mega-modern-container { display: block !important; position: static; } */
}