:root {
--font1: "Poppins", sans-serif;
--primary-orange: #d76527;
--radius: 3px;
}.container2 {
width: 1170px;
}/**/
.omm-wrapper {
width: 100%;
position: relative;
z-index: 999;
/* Diğer öğelerin üstünde kalsın */
}/* Navigasyon Alanı */
.omm-navbar {
display: flex;
max-width: 1400px;
/* Menünün taşmaması için sınır */
margin: 0 auto;
}.omm-list {
display: flex;
list-style: none;
/* Noktaları kaldır */
margin: 0;
padding: 0;
justify-content: space-between;
width: 100%;
}/* Menü Öğesi (Li) */
.omm-item {
}/* Menü Linkleri */
.omm-link {
display: block;
padding: 20px 30px 20px 0;
text-decoration: none;
color: #333;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: color 0.3s ease;
}.omm-link:hover {
color: #000;
/* Hover rengi */
}/* ------------------------------------------- AÇILIR MENÜ (DROPDOWN) STİLLERİ------------------------------------------- */
.omm-dropdown {
display: none;
position: absolute;
/* Navbar Wrapper'a göre konumlanır */
top: 100%;
left: 0;
width: 100%;
/* Ekran genişliği */
background-color: #fff;
border-top: 1px solid #eee;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
padding: 30px 30px;
z-index: 1000;
}/* Hover olunca aç */
.omm-item:hover .omm-dropdown {
display: block;
/* Flex yerine block yapıyoruz, içindeki div flex olacak */
}/* Sütun Yapısı */
.omm-column {
flex: 1;
/* Eşit dağılım */
min-width: 150px;
}/* Başlıklar (Sarı Çizgili) */
.omm-title {
font-size: 15px;
color: #000;
font-weight: 700;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 3px solid #d76527;
/* Görseldeki sarı çizgi */
display: inline-block;
min-width: 50px;
}/* Alt Link Listesi */
.omm-sublist {
list-style: none;
padding: 0;
margin: 0;
}.omm-sublist li {
margin-bottom: 12px;
}.omm-sublink {
text-decoration: none;
color: #555 !important;
font-size: 14px;
transition: 0.2s;
font-weight: 400;
}.omm-sublink:hover {
color: #fecb00;
/* Alt link hover rengi */
padding-left: 3px;
/* Hafif sağa kayma efekti */
}.btn-default {
position: relative;
display: inline-block;
background: #d76527;
border-radius: 6px;
font-size: 16px;
font-weight: 700;
line-height: 1em;
text-transform: capitalize;
color: white;
padding: 17px 58px 17px 24px;
border: none;
overflow: hidden;
outline: none;
z-index: 0;
text-decoration: none;
}.btn-default::before {
content: "";
position: absolute;
top: 50%;
right: 24px;
width: 18px;
height: 18px;
background-image: url("../images/arrow-white.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transform: translate(0, -50%);
transition: all 0.4s ease-in-out;
z-index: 1;
}.btn-default:hover:before {
transform: translate(2px, -50%);
}.btn-default::after {
content: "";
display: block;
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
width: 0;
height: 100%;
background: #000;
border-radius: 0;
transition: 0.4s ease-in-out;
z-index: -1;
}.btn-default:hover::after {
width: 100%;
left: 0;
right: auto;
}.btn-default.btn-highlighted:hover {
color: #000;
}.btn-default.btn-highlighted:hover:before {
background-image: url("../images/arrow-primary.svg");
}.btn-default.btn-highlighted::after {
background-color: white;
}body {
font-family: var(--font1);
padding: 0px;
margin: 0px;
overflow: auto !important;
}body.menu-open {
overflow: hidden;
}.header-ust {
background-color: #d76527;
font-size: 14px;
color: #333;
}.header-ust .container {
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 15px;
padding-left: 15px;
}.header-ust-sol {
width: 100%;
display: flex;
}.header-ust-sol span {
margin-right: 20px;
display: inline-flex;
align-items: center;
}.header-ust-sol a {
color: #ffffff;
text-decoration: none;
}.header-ust-sol svg {
fill: #ffffff;
width: 20px;
height: auto;
margin-right: 10px;
}.header-ust-sag {
display: flex;
gap: 10px;
}.header-ust-sag .sosyal {
display: inline-flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background-color: #0078d4;
color: #fff;
transition: all 0.3s ease;
}.header-ust-sag .sosyal:hover {
background-color: #005fa3;
}@media (max-width: 768px) {
.header-ust .container {
flex-direction: column;
gap: 5px;
text-align: center;
}.header-ust-sol {
font-size: 13px;
justify-content: center;
}
}.toplam {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: background-color 0.3s ease;
box-shadow: 0px 0px 10px 0px #0000004f;
padding-top: 0;
}.site-header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px;
}.site-header {
background: white;
height: auto;
}.logo {
color: #fff;
text-decoration: none;
flex-shrink: 0;
line-height: 1;
display: flex;
align-items: center;
width: 220px;
margin-top: 2px;
background: white;
border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px;
box-shadow: 0px 3px 17px #ffffff82;
position: relative;
}.logo img {
width: 100%;
}.main-nav {
flex-grow: 1;
display: flex;
justify-content: center;
padding-right: 0;
border-right: 1px solid #ffffff1f;
margin-right: 0;
}.main-nav ul {
display: flex;
list-style: none;
gap: 30px;
margin-bottom: 0;
align-items: center;
margin-top: 0;
padding: 0;
}.main-nav ul li:first-child {
display: none;
}.main-nav a {
color: #000000;
padding: 0;
position: relative;
text-decoration: none;
transition: all 0.5s;
font-size: 15px;
font-weight: 600;
background: transparent;
text-transform: uppercase;
}.main-nav a:hover {
}.has-dropdown > a {
display: flex;
align-items: center;
gap: 5px;
}.has-dropdown > a::after {
content: "∨";
font-size: 12px;
}.header-right {
display: flex;
align-items: center;
gap: 14px;
}.cart-icon {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
color: #fff;
font-size: 14px;
padding-left: 25px;
border-left: 1px solid #ffffff1f;
}.cart-icon svg {
width: 22px;
height: 22px;
}.cart-count {
margin-left: 5px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
}.cta-button {
background-color: rgb(128, 0, 0);
color: #fff;
padding: 12px 25px;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
border-radius: 4px;
transition: background-color 0.3s ease;
white-space: nowrap;
text-decoration: none;
}.cta-button:hover {
background-color: #b84d12;
color: #fff;
}.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
z-index: 1001;
}.menu-toggle .bar {
display: block;
width: 25px;
height: 3px;
background-color: rgb(128, 0, 0);
margin: 5px 0;
transition: all 0.4s;
}.menu-toggle.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}.menu-toggle.is-active .bar:nth-child(2) {
opacity: 0;
}.menu-toggle.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}.header-top-dil {
display: flex;
padding-left: 0px;
padding-right: 0px;
margin-bottom: 0px;
margin-top: 0;
}.header-top-dil li {
list-style: none;
margin-left: 20px;
position: relative;
padding-left: 0;
}.header-top-dil li span {
display: none;
}.header-top-dil li a {
color: #333333;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0;
display: flex;
align-items: center;
}.header-top-dil li:first-child:before {
display: none;
}.header-top-dil li a .icon {
margin-right: 0;
}.header-top-dil li a .icon img {
height: auto;
width: 20px;
}.nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0009;
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}.nav-overlay.is-active {
opacity: 1;
visibility: visible;
}@media (max-width: 1150px) {
.contact-info {
display: none;
}
}@media (max-width: 991.98px) {
.menu-toggle {
display: block;
margin-right: 20px;
}.main-nav {
justify-content: flex-end;
}.main-nav ul {
flex-direction: column;
position: fixed;
top: 0;
left: -100%;
width: 80%;
max-width: 320px;
height: 100vh;
background-color: #1a1a1a;
padding: 120px 40px 40px;
align-items: flex-start;
gap: 25px;
transition: left 0.5s cubic-bezier(0.77, 0, 0.175, 1);
z-index: 999;
}.main-nav ul.is-active {
left: 0;
}.main-nav ul a {
font-size: 20px;
color: white;
}.cta-button {
display: none;
}.about-section,
.services-section {
text-align: center;
}.about-image {
margin-top: 40px;
}.button-group {
justify-content: center;
}.about-headline {
font-size: 30px;
}
}.site-header .header-top-dil {
display: none;
}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;
}
}.mobilbuttonlar {
display: none;
}@media (max-width: 1024px) {
a.WhatsApp1 {
bottom: 60px;
}.site-header .header-top-dil {
display: flex;
}.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: #d76527;
border-color: #d76527;
color: #fff;
}.btn2 {
background: #c1561b;
border-color: #c1561b;
color: #fff;
}.btn3 {
background: #aa4914;
border-color: #aa4914;
color: #fff;
}.header-ust-sol span.adres {
display: none;
}.header-ust-sol .header-top-dil {
display: none;
}.header-ust {
display: none;
background: #800000;
}.header-top-dil {
margin-left: 0;
}.logo {
width: 140px;
}.footer-social-links {
margin-top: 0 !important;
}.footer-main {
display: none !important;
}.site-footer {
padding: 0px 0 30px !important;
}.site-header .container {
padding: 25px 10px;
}
}.site-header .telefon {
display: none;
color: #fff;
align-items: center;
margin-right: 50px;
}.site-header .telefon .icon {
background: #d76527;
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
margin-right: 10px;
}.site-header .telefon .icon svg {
width: 25px;
height: auto;
overflow: inherit;
fill: #fff;
}.site-header .telefon i {
color: #fff404;
font-size: 40px;
line-height: 40px;
margin-right: 15px;
}.site-header .telefon .icon .svgIcon {
fill: #fff404;
width: 39px;
display: inline-block;
margin-right: 20px;
display: block;
}.site-header .telefon .icon .svgIcon path {
fill: #fff404;
}.site-header .telefon span {
display: block;
font-size: 16px;
line-height: 16px;
opacity: 80%;
color: black;
margin-bottom: 5px;
}.site-header .telefon small {
display: block;
font-size: 20px;
color: black;
font-weight: 700;
line-height: 1.1em;
margin: 0;
}.footer-social-links {
list-style-type: none;
display: flex;
gap: 10px;
padding: 0;
margin: 0;
margin-top: 0;
margin-left: 30px;
}.footer-social-links a {
text-decoration: none;
background-color: #d76527;
width: 30px;
height: 30px;
border: 2px solid #d76527;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
}.footer-social-links a svg {
height: 15px;
width: 15px;
fill: #ffffff;
line-height: 1.2;
transition: 0.3s ease;
}@media (max-width: 1024px) {
.iletisim4 .about_list a,
.iletisim4 .about_list p {
color: black !important;
text-decoration: none !important;
}.footer-bottom {
margin-bottom: 40px !important;
}
}/**/
.site-footer {
background-color: transparent;
/* Hafif kırık beyaz arka plan */
padding: 70px 0 30px;
}.footer-container {
width: 100%;
box-sizing: border-box;
}/* Footer'ın üst kısmındaki 4 sütunlu grid */
.footer-main {
display: grid;
/* Sütunların genişliklerini görseldeki gibi ayarlıyoruz */
grid-template-columns: 2fr 2fr 2fr 1.7fr;
gap: 40px;
margin-bottom: 60px;
}/* Her bir sütun için genel stil */
.footer-column .column-title {
font-size: 14px;
font-weight: 700;
color: #2c303b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 0px;
margin-bottom: 25px;
}.footer-column .link-list {
list-style: none;
padding: 0;
margin: 0;
}.footer-column .link-list li {
margin-bottom: 15px;
}.footer-column .link-list a {
text-decoration: none;
color: #5a697d;
font-size: 15px;
transition: color 0.3s ease;
}.footer-column .link-list a:hover {
color: #d76527;
}/* İletişim Bilgileri Sütunu */
.contact-info .phone-number {
font-size: 28px;
font-weight: 700;
color: #d76527;
text-decoration: none;
display: block;
margin-bottom: 0;
}.contact-info .phone-note {
font-size: 14px;
margin-bottom: 25px;
margin: 10px 0;
}.contact-info .address {
font-size: 15px;
line-height: 1.6;
margin-bottom: 25px;
}.social-icons {
display: flex;
gap: 15px;
}.social-icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background-color: #d76527;
border-radius: 50%;
color: #fff;
transition: transform 0.3s ease, background-color 0.3s ease;
}.social-icon:hover {
transform: scale(1.1);
}.social-icon svg {
width: 20px;
height: 20px;
fill: #fff;
}.location-picker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: var(--color-black-main);
margin-bottom: 20px;
cursor: pointer;
}.location-picker svg {
width: 18px;
height: 18px;
}.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid #e9ecef;
font-size: 14px;
}.footer-bottom a {
text-decoration: none;
color: #5a697d;
transition: color 0.3s ease;
}.footer-bottom a:hover {
color: #d76527;
}.hasem-logo {
margin-left: auto;
}.hasem-logo img {
width: auto;
height: 25px;
}.destek-hizmetleri {
width: 100%;
padding: 60px 0px;
background-color: #10439f;
position: relative;
}.btn-orange {
background: #d76527;
color: #fff;
padding: 18px 35px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}.btn-orange:hover {
background: #000;
color: #fff;
}/**//* --- Sağ Kenar Dikey Katalog Butonu --- */
.katalog-side-tab {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%); /* Tam dikey merkezleme */
background-color: #d76527;
color: white;
text-decoration: none;
display: flex;
flex-direction: column; /* İkon üste, metin alta */
align-items: center;
padding: 20px 10px;
border-radius: 12px 0 0 12px; /* Sadece sol köşeler yuvarlak */
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15);
z-index: 10000;
transition: all 0.3s ease;
}.katalog-side-tab:hover {
background-color: #b4531e; /* Üzerine gelince siyah/koyu antrasit olur */
padding-right: 20px; /* Hafifçe sola doğru genişleme efekti */
}.katalog-side-tab svg {
width: 24px;
height: 24px;
fill: white;
margin-bottom: 12px; /* İkon ile metin arası boşluk */
}.katalog-side-tab span {
writing-mode: vertical-rl; /* Metni dikey yapar */
text-orientation: mixed;
transform: rotate(
180deg
); /* Yazının yönünü aşağıdan yukarıya doğru ayarlar */
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
white-space: nowrap;
}/* Mobil cihazlarda çok yer kaplamaması için hafif küçültme */
@media (max-width: 480px) {
.katalog-side-tab {
padding: 15px 8px;
}
.katalog-side-tab span {
font-size: 0.75rem;
letter-spacing: 1px;
}
}