:root {
--font1: "Jost", sans-serif;
--primary-red: #cc0101;
--dark-bg: #1a1a1a;
--white: #ffffff;
}body { font-family: var(--font1); margin: 0; padding: 0; }
body.menu-open { overflow: hidden; }/* Header Genel */
.site-header {
position: fixed;
top: 0; left: 0; width: 100%;
background-color: var(--primary-red);
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}.header-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
padding: 0 5%;
}/* Logo */
.logo img {
height: auto;
display: block;
width: 240px;
margin-top: -13px;
object-fit: cover;
filter: brightness(0) saturate(100%) invert(100%) sepia(0) saturate(4791%) hue-rotate(171deg) brightness(114%) contrast(92%);
}/* Navigasyon - Masaüstü */
.main-nav { flex-grow: 1; display: flex; justify-content: end; }
.main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.main-nav ul li { position: relative; }
.main-nav ul li a {
color: var(--white);
text-decoration: none;
padding: 0 15px;
line-height: 80px;
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
transition: 0.3s;
}/* Alt Menü - Masaüstü */
.nav-submenu ul {
position: absolute;
top: 100%; left: 0;
background: white;
min-width: 220px;
display: block;
opacity: 0; visibility: hidden;
transform: translateY(10px);
transition: 0.3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.nav-submenu:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-submenu ul li a {
font-size: 14px;
line-height: 17px;
font-weight: 400;
display: block;
padding: 15px 16px;
text-align: left;
color: black;
border-radius: 0;
transition: all 0.3s linear;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
text-transform: capitalize;
}
.nav-submenu ul li a:hover { background: var(--primary-red); color: white; }/* Sağ Ekstra Alan (Arama, Tel, Dil) */
.header_extra { display: flex; align-items: center; color: white; position: relative;}
.header_extra a { color: white; text-decoration: none; display: flex; align-items: center; }.header_extra .cizgi{
display: flex;
border-left: solid 1px #e2e2e2;
border-right: solid 1px #e2e2e2;
padding: 10px 10px;
margin-right: 10px;
margin-left: 10px;
}/* Arama Kutusu */
.header_search { position: relative; }
.search_btn { cursor: pointer; font-size: 20px; }.close_btn { position: absolute; right: 20px; cursor: pointer; color: black; font-size: 24px; }/* Dil Seçeneği */
.language { position: relative; cursor: pointer; }
.language .list {
position: absolute; top: 100%; right: 0;
background: white; list-style: none; padding: 10px;
display: none; box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.language:hover .list { display: block; }
.language .list li a { color: #333; padding: 5px 10px; }/* Tooltip (Telefon için) */
.tel-header { position: relative; }
.rota-tooltip {
position: absolute; top: 120%; left: 50%;
transform: translateX(-50%);
background: #333; color: white;
padding: 5px 10px; border-radius: 4px;
font-size: 12px; white-space: nowrap;
display: none;
}
.tel-header:hover .rota-tooltip { display: block; }/* Mobil Ayarlar */
.menu-toggle { display: none; background: none; border: none; cursor: pointer; }
.menu-toggle .bar { display: block; width: 25px; height: 3px; background: white; margin: 5px 0; }@media (max-width: 1100px) {
.menu-toggle { display: block; order: 3; }
.main-nav { display: none; } /* JS ile açılacak */
.main-nav.is-active {
display: block; position: fixed; top: 0; left: 0;
width: 80%; height: 100vh; background: var(--dark-bg);
z-index: 1002; padding: 80px 20px;
}
.main-nav.is-active ul { flex-direction: column; }
.main-nav.is-active ul li a { line-height: 50px; border-bottom: 1px solid #333; }
.tel-header span { display: none; }
}/* Alt Mobil Butonlar */
.mobilbuttonlar {
position: fixed; bottom: 0; width: 100%;
display: none; z-index: 999;
}
@media (max-width: 1024px) {
.mobilbuttonlar { display: flex; }
.btn { flex: 1; text-align: center; padding: 15px; color: white; text-decoration: none; }
.btn1 { background: #5f8f8f; }
.btn2 { background: #497676; }
.btn3 { background: #375f5f; }
.btn svg { width: 20px; height: 20px; fill: white; }
}.nav-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.5); display: none; z-index: 998;
}
.nav-overlay.is-active { display: block; }/* --- Şeffaflık ve Geçiş Ayarları --- */
.site-header {
background-color: transparent; /* Başlangıç şeffaf */
transition: background-color 0.4s ease, height 0.4s ease;
box-shadow: none;
}/* Sayfa aşağı inince kırmızı olan hali */
.site-header.scrolled {
background-color: var(--primary-red) !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}/* İkonlar Arası Çizgiler */
.extra-icon-wrapper {
padding: 0 10px;
display: flex;
align-items: center;
}.extra-icon-wrapper svg{
width: 25px;
height: auto;
overflow: inherit;
stroke: #fff;
}.extra-icon-wrapper:last-of-type {
border-right: none;
}/* --- GÖRSELDEKİ ÖZEL ARAMA KUTUSU STİLİ --- */
.header_search_content {
position: absolute;
top: 100px; /* Header'ın hemen altına */
right: 30%;
width: 400px;
height: auto; /* Sabit 100px'i iptal ettik */
background: white;
padding: 12px 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
display: flex;
align-items: center;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1001;
}.search-icon-left { color: #333; }.search-divider {
width: 1px;
height: 25px;
background: #eee;
margin: 0 15px;
}.header_search_content form { flex-grow: 1; }.header_search_content input {
width: 100%;
border: none !important;
font-size: 15px;
color: #333;
outline: none;
}/* Mobilde çizgileri düzenle */
@media (max-width: 1100px) {
.extra-icon-wrapper { padding: 0 10px; }
.header_search_content { width: 150%; right: 5%; top: 80px; }
}/* --- GÖRSELDEKİ ÖZEL ARAMA KUTUSU STİLİ --- */
.header_search_content {
position: absolute;
top: 100%; /* Header'ın hemen altına yapışır */
right: 30%;
width: 600px; /* Genişliği ihtiyaca göre artırabilirsiniz */
max-width: 90vw;
background: #ffffff;
padding: 0;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 9999;
}/* Aktif olduğunda görünsün */
.header_search_content.active {
opacity: 1;
visibility: visible;
transform: translateY(15px); /* Header'dan biraz boşluk bırakır */
}.search-box-inner {
display: flex;
align-items: center;
padding: 22px 30px 23px;
width: 100%;
}.search-icon-left {
color: #333;
display: flex;
align-items: center;
}.search-divider {
width: 1px;
height: 30px;
background: #e0e0e0;
margin: 0 20px;
}.header_search_content input {
width: 100%;
border: none !important;
font-size: 16px;
color: #333;
outline: none;
background: transparent;
font-family: inherit;
}.header_search_content .close_btn {
color: #333;
cursor: pointer;
transition: 0.3s;
display: flex;
align-items: center;
padding-left: 15px;
}/* Mobilde genişlik ayarı */
@media (max-width: 768px) {
.header_search_content {
width: 150%;
right: 5%;
}
}/* Dil Seçeneği Yeni Stil */
.language {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
}.lang-current {
display: flex;
align-items: center;
gap: 5px;
color: white;
padding: 5px 0;
}.lang-current svg {
width: 20px;
height: 20px;
fill: white;
}.current-lang-text {
font-size: 14px;
font-weight: 600;
}/* Dropdown Menü */
.language-dropdown {
position: absolute;
top: 100%;
right: -25px;
background: white;
min-width: auto;
list-style: none;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 1005;
padding: 0;
}/* Açık Hal */
.language.active .language-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}.language-dropdown li a {
color: #333 !important;
padding: 5px 25px;
display: block;
font-size: 14px;
text-decoration: none;
text-align: center;
font-weight: 500;
transition: 0.2s;
text-transform: uppercase;
}.language-dropdown li a:hover {
background: #f5f5f5;
color: var(--primary-red) !important;
}/* Header şeffafken veya kırmızıyken yazı rengi uyumu */
.site-header.scrolled .lang-current {
color: white;
}/* --- FOOTER GENEL --- */
.footer {
padding-top: 70px !important;
background: #fbfbfb;
border-top: 1px solid #ededed;
font-family: "Jost", sans-serif;
}.footer .container .row:not(.footer-bottom .row) {
padding: 50px 0 !important;
}.footer-logo {
width: 250px;
margin-bottom: 20px;
}/* --- BAŞLIKLAR (Kurumsal, Ürünler, İletişim) --- */
.text-heading {
font-size: 22px;
line-height: 24px;
font-weight: 700;
margin-bottom: 15px;
position: relative;
color: #000;
}.text-heading::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: calc(100% - 25px);
height: 2px;
background-color: #47546727;
}.text-heading::after {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 35%;
height: 2px;
background-color: #cc0101; /* Kurumsal Kırmızı */
}/* --- MENÜ LİNKLERİ --- */
.footer .menu-footer {
padding: 0;
display: inline-block;
}.footer .menu-footer li {
list-style: none;
margin-top: 8px;
}.footer .menu-footer li a {
color: #667085;
font-size: 16px;
line-height: 28px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}.footer .menu-footer li a:hover {
color: #cc0101;
padding-left: 5px;
}/* Tümü Linki (İkonlu) */
.uncle-link i {
font-size: 15px;
margin-left: 7px;
vertical-align: middle;
}/* --- SOSYAL MEDYA İKONLARI --- */
.menu-footer.social {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}.social a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 52px;
width: 52px;
border: 2px solid #e7ece9;
border-radius: 50%;
color: #cc0101;
transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52);
z-index: 1;
background: #fff;
}.social a svg {
width: 18px;
height: 18px;
fill: #cc0101;
transition: 0.3s;
}/* Yuvarlak Dolma Efekti */
.social a::before {
position: absolute;
top: -1px; left: -1px; bottom: -1px; right: -1px;
background: #cc0101;
border-radius: 50%;
content: "";
z-index: -1;
transform: scale(0);
transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52);
}.social a:hover::before {
transform: scale(1);
}.social a:hover svg {
fill: #fff;
}.footer-social-box span {
font-weight: 500;
font-size: 14px;
margin-top: 10px;
display: block;
color: #667085;
}/* --- ÇEREZ VE GİZLİLİK LİNKLERİ --- */
.about-cc {
margin-top: 25px;
border-top: 1px solid #ededed;
padding-top: 15px;
}.about-cc ul {
display: flex;
gap: 15px;
padding: 0;
}.about-cc ul li {
list-style: none;
}.about-cc ul li a {
text-decoration: none;
font-size: 18px;
font-weight: 400;
color: #000;
}.about-cc ul li + li {
margin-left: 15px;
border-left: 2px solid #000;
padding-left: 20px;
}.about-cc ul li a:hover {
color: #cc0101;
}/* --- FOOTER ALT BANT (Copyright) --- */
.footer-bottom {
border-top: 2px solid rgba(255, 0, 0, 0.1);
padding: 30px 0;
}.text-body-lead {
font-weight: 600;
font-size: 16px;
color: #cc0101;
}.footer-bottom img {
max-width: 230px; /* Yerli üretim logosu */
}/* --- WEB TASARIM İMZASI (Sanatüstü) --- */
.sanatustuWEB {
display: inline-flex;
align-items: center;
gap: 5px;
text-decoration: none;
color: #000;
}.sanatustuWEB span {
font-size: 11px;
}.sanatustuSpanF {
font-size: 20px;
font-weight: bold;
}.sanatustuSpanL {
font-size: 20px;
}/* --- MOBİL AYARLAR --- */
@media screen and (max-width: 768px) {
.footer .row {
text-align: center;
}
.text-heading::after {
left: 50%;
transform: translateX(-50%);
}.social {
justify-content: center;
}.about-cc ul {
justify-content: center;
}.responsive-bottom {
text-align: center !important;
margin-top: 20px;
justify-content: center !important;
display: flex;
}.footer {
padding-top: 0px !important;
}
}/**//* Mobil Menü Açma Butonu - Masaüstünde Gizle */
.mobile-menu-open-btn {
display: none;
background: none;
border: none;
cursor: pointer;
}/* YENİ MOBİL MENÜ STİLLERİ */
.mobile-menu {
position: fixed;
top: 0;
left: -100%; /* Kapalıyken solda gizli */
width: 300px;
height: 100vh;
background: #fff;
z-index: 9999;
transition: 0.4s ease-in-out;
padding-top: 20px;
box-shadow: 5px 0 15px rgba(0,0,0,0.1);
overflow-y: auto;
}.mobile-menu.active {
left: 0; /* Açıldığında ekrana girer */
}/* Kapatma Butonu */
.ri-close-circle-fill {
position: absolute;
top: 15px;
right: 15px;
font-size: 30px;
color: var(--primary-red);
cursor: pointer;
}/* Liste Yapısı */
.menu-mobile ul { list-style: none; padding: 0; margin: 0; }
.menu-mobile ul li { border-bottom: 1px solid #eee; }
.menu-mobile ul li a {
display: block;
padding: 15px 20px;
color: #333;
text-decoration: none;
font-weight: 500;
}/* Alt Menü Mantığı */
.mobile-link-row {
display: flex;
justify-content: space-between;
align-items: center;
}.submenu-toggle {
padding: 15px 20px;
font-size: 20px;
cursor: pointer;
transition: 0.3s;
}.mega-submenu {
display: none; /* Varsayılan kapalı */
background: #f9f9f9;
}.mega-menu-item.open .mega-submenu {
display: block;
}.mega-menu-item.open .submenu-toggle {
transform: rotate(180deg);
}/* Mobilde Görünürlük Ayarı */
@media (max-width: 1100px) {
.mobile-menu-open-btn { display: block; }
.main-nav { display: none; } /* Eski menüyü mobilde gizle */
}@media(max-width:1024px) {
.logo img {
width: 150px;
}.extra-icon-wrapper.telefon{
display: none;
}.header_extra .cizgi {
display: flex;
border-left: none;
border-right: none;
padding: 0;
margin-right: 0;
margin-left: 0;
}
}/* MOBİL MENÜ İÇİN ÖZEL SIFIRLAMA VE DÜZENLEME */
@media (max-width: 1100px) {
/* Masaüstünden kalan engelleri kaldır */
.menu-mobile .nav-submenu ul {
position: relative !important; /* Alt menüyü akışa dahil et */
top: 0 !important;
left: 0 !important;
width: 100% !important;
min-width: 100% !important;
display: none; /* Başlangıçta gizle */
opacity: 1 !important; /* Görünürlüğü zorla */
visibility: visible !important; /* Görünürlüğü zorla */
transform: none !important; /* Kayma efektini iptal et */
box-shadow: none !important;
background-color: #fcfcfc !important; /* Hafif gri arka plan */
padding: 0 !important;
margin: 0 !important;
}/* Alt menü açıldığında (JS ile 'open' klası gelince) */
.menu-mobile .nav-submenu.open > ul {
display: block !important;
}/* Alt menüdeki linklerin renk ve stilini netleştir */
.menu-mobile .nav-submenu ul li a {
color: #333 !important; /* Yazı rengini siyah/gri yap */
padding: 15px 40px !important; /* İçeriye doğru it */
font-size: 14px !important;
line-height: normal !important;
display: block !important;
border-bottom: 1px solid #eee !important;
text-transform: none !important;
}/* Ana linkin (Ebeveyn) yanına açma butonu için yer ayır */
.menu-mobile .nav-submenu {
position: relative;
}/* Açma Butonu (Artı/Ok İkonu) */
.submenu-toggle-btn {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 54px; /* Link yüksekliğiyle aynı olmalı */
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #666;
cursor: pointer;
border-left: 1px solid #eee;
z-index: 10;
}/* Menü açıkken butonu döndür */
.nav-submenu.open > .submenu-toggle-btn {
transform: rotate(180deg);
color: var(--primary-red);
}
}/* --- GENEL WHATSAPP KONTEYNER --- */
.whatsapp {
position: fixed;
border-radius: 50%;
width: 60px;
height: 60px;
bottom: 50px;
left: 30px;
background-color: #25d366;
cursor: pointer;
z-index: 10000;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}/* WhatsApp Logosu (Resim yoksa orta kısma beyaz bir simge yerleştirir) */
.wp-logo::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.7 17.8 69.4 27.2 106.2 27.2 122.4 0 222-99.6 222-222 0-59.3-23-115.1-65-157.1zM223.9 445.8c-33.1 0-65.7-8.9-94.1-25.7l-6.7-4-69.8 18.3 18.7-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 54 81.2 54 130.4 0 101.7-82.8 184.5-184.6 184.5zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-5.5-2.8-23.4-8.6-44.5-27.5-16.4-14.7-27.5-32.8-30.7-38.3-3.2-5.6-.3-8.6 2.5-11.4 2.5-2.5 5.6-6.5 8.3-9.7 2.8-3.3 3.7-5.6 5.5-9.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 13.2 5.8 23.5 9.2 31.5 11.8 13.3 4.2 25.4 3.6 35 2.2 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") no-repeat center;
background-size: 30px;
}.whatsapp .list-wp {
position: absolute;
bottom: 120%;
left: 0;
padding: 20px;
width: 280px;
border-radius: 14px;
background-color: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}.whatsapp .list-wp.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}.whatsapp .list-wp a {
display: block;
text-decoration: none !important;
}.whatsapp .list-wp a label {
color: #cc0101;
font-weight: 600;
margin-bottom: 6px;
font-size: 15px;
display: block;
cursor: pointer;
}.whatsapp .list-wp a .item {
display: flex;
align-items: center;
padding: 10px 14px;
border: 1px solid #eee;
border-radius: 12px;
color: #333;
transition: 0.3s;
font-size: 14px;
}.whatsapp .list-wp a:hover .item {
border-color: #cc0101;
background-color: #fff9f9;
color: #cc0101;
}.whatsapp .list-wp a + a {
margin-top: 12px;
}/* --- YUKARI ÇIK (PROGRESS WRAP) --- */
.progress-wrap {
position: fixed;
right: 30px;
bottom: 30px;
height: 56px;
width: 56px;
cursor: pointer;
display: block;
border-radius: 50px;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05);
z-index: 10000;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 300ms linear;
background-color: #fff;
}.progress-wrap.active-progress {
opacity: 1;
visibility: visible;
transform: translateY(0);
}/* CSS İLE ÇİZİLMİŞ OK (FontAwesome Yerine) */
.progress-wrap::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
border-left: 3px solid #cc0101;
border-top: 3px solid #cc0101;
transform: translate(-50%, -35%) rotate(45deg); /* Yukarı bakan ok */
transition: all 200ms border-color;
}.progress-wrap:hover::after {
border-color: #000;
}.progress-wrap svg path {
fill: none;
stroke: #cc0101; /* İlerleme çizgisi rengi */
stroke-width: 4;
}