/* ==========================================================================
MODERN THEME LAYER
Mevcut style.css'in üzerine yüklenir, yapıyı bozmadan görsel modernizasyon
sağlar. Kaldırmak için header.php'deki satırını silmek yeterlidir.
========================================================================== */
/* Google Fonts artık @import ile değil, HTML 'de preconnect +
ile paralel/non-blocking yükleniyor (bkz. header ekleri). */
:root {
--brand: #0f1e40;
--brand-light: #16295a;
--brand-lighter: #1d3560;
--accent: #1ea2de;
--accent-2: #ff9012;
--ink: #2b2f38;
--muted: #6b7280;
--line: #eceef1;
--bg-soft: #f6f7f9;
--radius: 14px;
--radius-sm: 8px;
--shadow-sm: 0 2px 10px rgba(15, 30, 64, 0.06);
--shadow-md: 0 12px 30px rgba(15, 30, 64, 0.12);
--shadow-lg: 0 24px 60px rgba(15, 30, 64, 0.18);
--ease: cubic-bezier(.22, 1, .36, 1);
}
/* ---------- base / typography ---------- */
body { color: var(--ink); -webkit-font-smoothing: antialiased; }
#main .baslik,
#main #kurumsal .baslik,
#main #kategoriler .baslik,
#main #altbilgi .baslik,
.page-content-left-title h2,
.productcontent h2 {
font-family: 'Poppins', 'Open Sans', sans-serif;
}
::selection { background: var(--accent); color: #fff; }
*,
*::before,
*::after { box-sizing: border-box; }
a, .topbtn, .detay, .devami, .katlink a,
#main #kategoriler .item, #main #kategoriler .item:before, #main #kategoriler .item:hover:before,
#main #kategoriler2 .item, .navbar-default .navbar-nav>li>a,
.gonder, .bluebtn, .redbtn, .formagit {
transition: all .3s var(--ease);
}
/* thin modern scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: #c7cdd8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }
/* ---------- header ---------- */
header {
/* images/menu.png dosyası mevcut değil (404), her sayfada gereksiz
ağ isteğine yol açıyordu — kaldırıp düz koyu zemin bırakıyoruz. */
background-image: none !important;
background-color: rgba(0,0,0,.3);
}
header .top {
background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 100%);
border-bottom: none;
}
/* Orijinal CSS'te ".navbar-default .navbar-collapse { border-color: none; }"
geçersiz bir değer (border-color "none" kabul etmez), tarayıcı bu satırı
yok sayıp Bootstrap'ın varsayılan açık gri (#e7e7e7) kenarlık
rengini kullanmaya devam ediyordu — header altındaki ince gri çizginin
gerçek kaynağı buydu. */
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: transparent !important;
box-shadow: none !important;
}
header .middle { box-shadow: var(--shadow-sm); position: relative; z-index: 50; }
header .top .search-text {
border-bottom: 1px solid rgba(255,255,255,.35);
}
header .top .search-text:focus { border-bottom-color: #fff; }
.dilbolge a {
padding: 3px 8px !important;
border-radius: 20px;
transition: background .25s var(--ease);
}
.dilbolge a:hover { background: rgba(255,255,255,.15); }
.topbtn {
border-radius: 30px !important;
font-weight: 600;
letter-spacing: .2px;
}
.topbtn:hover {
background: var(--brand) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
/* İkon boyutu/hizası SADECE masaüstünde (>=992px) — mobilde eski
float+inline-block tabanlı .telefon/.social düzeniyle çakışıp
header'ın gerçek yüksekliğini büyütüyor, alttaki hero içeriğiyle
üst üste binmesine yol açıyordu. */
@media (min-width: 992px) {
header .middle .social a img,
header .middle .telefon a img {
width: 40px;
height: 40px;
padding: 10px;
box-sizing: border-box;
border-radius: 50%;
background: var(--bg-soft);
border: 1px solid var(--line);
object-fit: contain;
transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
header .middle .social a:hover img,
header .middle .telefon a:hover img {
background: #fff;
border-color: var(--accent);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
}
/* hover'da ikon üzerinde platform adını gösteren tooltip (aria-label'dan) */
header .middle .social a,
.mt-footer-social a {
position: relative;
}
header .middle .social a[aria-label]:hover::after,
.mt-footer-social a[aria-label]:hover::after {
content: attr(aria-label);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--brand);
color: #fff;
font-size: 11.5px;
font-weight: 600;
padding: 4px 9px;
border-radius: 5px;
white-space: nowrap;
z-index: 20;
pointer-events: none;
box-shadow: var(--shadow-sm);
}
header .middle .social a[aria-label]:hover::before,
.mt-footer-social a[aria-label]:hover::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--brand);
margin-bottom: 3px;
z-index: 20;
pointer-events: none;
}
@media (min-width: 992px) {
header .middle .social { display: flex; align-items: center; gap: 10px; }
header .middle .social a { margin-left: 0 !important; }
header .middle .telefon { display: flex; align-items: center; }
header .middle .telefon a { display: flex !important; align-items: center; gap: 10px; }
header .middle .telefon .txt {
font-size: 13.5px;
font-weight: 600;
color: var(--ink) !important;
}
}
/* satır içi gruplar arasında daha net boşluk/hiyerarşi + tam dikey hizalama
— SADECE masaüstünde (>=992px). Mobilde eski kodun kendine özgü
konumlandırması (telefon/sosyal/logo için absolute/float kuralları)
ile çakışıp içeriğin üst üste binmesine yol açıyordu. */
@media (min-width: 992px) {
header .middle .row .row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 22px;
}
header .middle .col-md-2_5,
header .middle .col-md-2_7 {
width: auto;
padding: 0;
}
/* eski kod logoyu position:relative; top:15px ile aşağı kaydırıyordu —
flex hizalamasında bu diğer öğelerle hizasız görünmesine yol açıyordu */
header .middle .navbar-brand.topnav {
position: static !important;
top: auto !important;
left: auto !important;
float: none !important;
margin: 0 !important;
display: flex !important;
align-items: center;
}
}
/* Mobil üst bar: eski kodda WEB SHOP (x2 tekrar), B4B, dilbolge hepsi
position:absolute; top:0; right:0 ile AYNI noktaya yerleşiyordu — bu
yüzden üst üste biniyorlardı. Tamamını tek bir flex satırına alıp
absolute'a hiç güvenmeden, aralarında gerçek boşluk bırakıyoruz. */
@media (max-width: 1025px) {
.container.topnav {
display: flex !important;
align-items: center !important;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 6px;
position: relative;
min-height: 40px;
padding-right: 4px;
}
.topnav .shop {
position: static !important;
display: flex !important;
gap: 6px;
order: 1;
width: auto !important;
}
.topnav .shop .topbtn {
position: static !important;
margin-top: 0 !important;
padding: 5px 10px !important;
font-size: 11px !important;
border-radius: 20px;
white-space: nowrap;
}
.searchbar {
order: 2;
position: static !important;
float: none !important;
left: auto !important;
top: auto !important;
margin: 0 !important;
}
.dilbolge {
order: 3;
position: static !important;
margin: 0 !important;
padding-left: 6px !important;
border-left: 1px solid rgba(255,255,255,.15);
}
.mov { display: none !important; }
}
.mt-header-ctas {
display: flex;
gap: 10px;
align-items: center;
margin-left: auto;
}
.mt-topbtn-primary {
background: var(--accent-2) !important;
border-color: var(--accent-2) !important;
color: #fff !important;
}
.mt-topbtn-primary:hover {
background: var(--brand) !important;
border-color: var(--brand) !important;
}
.navbar-default .navbar-nav>li>a {
letter-spacing: .2px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li.current>a {
background-image: none !important;
color: var(--accent-2) !important;
}
.navbar-nav>li>.dropdown-menu {
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.navbar-nav>li>.dropdown-menu>li>a:hover {
background-color: var(--accent) !important;
border-bottom-color: var(--accent) !important;
padding-left: 26px !important;
}
header.scroll .middle,
header .fixed-menu {
box-shadow: var(--shadow-md);
}
/* ---------- hero / banner ---------- */
#main #banner #main-slider .item {
position: relative;
overflow: hidden;
}
#main #banner #main-slider .item:before {
background: linear-gradient(100deg, rgba(9,17,38,.78) 0%, rgba(15,30,64,.45) 45%, rgba(15,30,64,.15) 100%);
}
#main #banner #main-slider-content .item span {
text-shadow: 0 4px 24px rgba(0,0,0,.35);
word-break: break-word;
}
#main #banner .detay {
border-radius: 30px;
border-width: 2px;
padding: 10px 30px !important;
font-weight: 600;
backdrop-filter: blur(2px);
}
#main #banner .detay:hover {
background: #fff;
color: var(--brand) !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.katlink a {
border-radius: 30px !important;
backdrop-filter: blur(3px);
background: rgba(15,30,64,.25);
}
.katlink a:hover {
background: rgba(255,255,255,.92) !important;
color: var(--brand) !important;
border-color: #fff !important;
transform: translateY(-2px);
}
#main #banner .slick-dots li button:before { border-radius: 3px; }
#main #banner .slick-dots li.slick-active button:before { background: var(--accent-2) !important; }
/* ---------- kurumsal (intro) ---------- */
#main #kurumsal .baslik {
position: relative;
display: inline-block;
width: 100%;
}
#main #kurumsal .yazi { line-height: 1.8; max-width: 900px; margin: 0 auto; }
#main #kurumsal .devami {
border: 1px solid var(--brand);
border-radius: 30px;
padding: 8px 22px;
text-decoration: none !important;
display: inline-block !important;
width: auto !important;
}
#main #kurumsal .devami:hover {
background: var(--brand);
color: #fff !important;
}
/* ---------- bilgi (stats strip) ---------- */
#main #bilgi {
position: relative;
}
#main #bilgi:before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(9,17,38,.55), rgba(9,17,38,.7));
}
#main #bilgi .row { position: relative; z-index: 2; }
#main #bilgi .item {
padding: 18px 10px;
border-radius: var(--radius);
transition: transform .3s var(--ease);
}
#main #bilgi .item:hover { transform: translateY(-4px); }
/* ---------- kategoriler (product grid) ---------- */
#main #kategoriler .baslik span,
#main #altbilgi .baslik span {
border-bottom: 3px solid var(--accent-2) !important;
padding-bottom: 6px;
}
/* Kart: görsel her zaman görünür üstte, başlık + "detay" linki altta sabit.
Eski tam-kaplayan lacivert hover katmanı kaldırıldı; onun yerine görselde
hafif zoom + başlıkta renk/ok animasyonu var. */
#main #kategoriler .item,
#main #kategoriler2 .item,
.page #main #kategoriler .item {
display: flex !important;
flex-direction: column;
padding: 0 !important;
min-height: auto !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-sm);
overflow: hidden;
background: #fff;
}
#main #kategoriler .item:hover,
#main #kategoriler2 .item:hover,
.page #main #kategoriler .item:hover {
border: 1px solid var(--line) !important;
min-height: auto !important;
box-shadow: var(--shadow-md);
transform: translateY(-6px);
}
/* eski tam-kaplayan overlay'i devre dışı bırak */
#main #kategoriler .item:before,
#main #kategoriler2 .item:before,
#main #kategoriler .item:hover:before,
#main #kategoriler2 .item:hover:before,
.page #main #kategoriler .item:hover:before {
display: none !important;
content: none !important;
}
#main #kategoriler .item img,
#main #kategoriler2 .item img {
position: static !important;
display: block !important;
width: 100% !important;
height: 250px;
margin: 0 !important;
object-fit: contain;
background: var(--bg-soft);
padding: 8px;
transition: transform .45s var(--ease);
}
#main #kategoriler .item:hover img,
#main #kategoriler2 .item:hover img {
transform: scale(1.06);
}
#main #kategoriler .item h3,
#main #kategoriler .item h4,
#main #kategoriler2 .item h4 {
position: static !important;
top: auto !important;
left: auto !important;
width: auto !important;
text-align: left !important;
color: var(--brand) !important;
font-size: 14.5px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
padding: 14px 16px 2px !important;
margin: 0 !important;
border-top: 1px solid var(--line);
}
#main #kategoriler .item:hover h3,
#main #kategoriler .item:hover h4,
#main #kategoriler2 .item:hover h4 {
color: var(--accent) !important;
top: auto !important;
}
#main #kategoriler .item .detay,
#main #kategoriler2 .item .detay {
display: block !important;
position: static !important;
bottom: auto !important;
left: auto !important;
margin: 0 !important;
width: auto !important;
padding: 4px 16px 16px !important;
border: none !important;
text-align: left !important;
color: var(--muted) !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .3px;
text-transform: uppercase;
}
#main #kategoriler .item .detay:after,
#main #kategoriler2 .item .detay:after {
content: "→";
display: inline-block;
margin-left: 6px;
transition: transform .3s var(--ease);
}
#main #kategoriler .item:hover .detay,
#main #kategoriler2 .item:hover .detay {
color: var(--accent) !important;
}
#main #kategoriler .item:hover .detay:after,
#main #kategoriler2 .item:hover .detay:after {
transform: translateX(4px);
}
/* ---------- altbilgi (news + suppliers) ---------- */
#main #altbilgi {
background: var(--bg-soft);
}
#main #altbilgi .haberler .panel {
border-radius: var(--radius-sm) !important;
overflow: hidden;
margin-bottom: 8px !important;
box-shadow: var(--shadow-sm);
}
#main #altbilgi .haberler .panel-default>.panel-heading {
background-color: #fff;
border-radius: var(--radius-sm);
}
#main #altbilgi .haberler .panel-title a {
padding: 14px 16px;
}
#main #altbilgi .haberler .collapse.in {
background: #fff !important;
}
#main #altbilgi .ebulten .logo span img {
border-radius: var(--radius-sm);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
#main #altbilgi .ebulten .logo span img:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
/* ---------- buttons (site-wide) ---------- */
.bluebtn, .redbtn {
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
.bluebtn:hover, .redbtn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.gonder {
border-radius: 30px;
padding: 12px 36px;
font-weight: 600;
letter-spacing: .3px;
}
.gonder:hover { background: var(--brand); }
.form-control {
border-radius: var(--radius-sm) !important;
border-color: var(--line) !important;
}
.form-control:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(30,162,222,.15) !important;
}
/* ---------- inner page layout ---------- */
#main .page-article .page-content-left {
border-radius: var(--radius);
box-shadow: var(--shadow-sm) !important;
overflow: hidden;
}
#main .page-article .page-content-left .page-content-left-title {
border-bottom: 1px solid var(--line);
}
#main .page-article .page-content-left ul li a:hover { padding-left: 26px; }
#main .banner-box .slogan-color {
background: linear-gradient(120deg, rgba(9,17,38,.75), rgba(15,30,64,.45)) !important;
}
#main .page-article .page-content-right .urunler-content-article-box {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
#main .page-article .page-content-right .urunler-content-article-box:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.pdfdokuman tr td img {
border-radius: var(--radius-sm);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.pdfdokuman tr td img:hover {
transform: translateY(-3px);
}
/* ---------- Tarihçemiz zaman tüneli (cd-timeline) ---------- */
/* timeline.js sadece 'scroll' olayına bağlı eski bir reveal sistemi;
tetiklenmezse (kısa sayfa, hızlı geçiş, vb.) içerik kalıcı olarak
visibility:hidden kalabiliyor. Animasyonu bozmadan görünürlüğü
garanti altına alıyoruz. */
.cssanimations .cd-timeline-img.is-hidden,
.cssanimations .cd-timeline-content.is-hidden {
visibility: visible !important;
}
/* ---------- ürün/katalog kart grid'lerinde eşit yükseklik + hizalama ----------
Bootstrap 3'ün float tabanlı .row/.col sistemi farklı yükseklikteki
kartları (ör. 2 satıra düşen başlık) düzgün saflarda tutamıyor, kart
yanlış konuma "sıkışıyor". Flex satır + eşit yükseklik ile çözüyoruz. */
#main #kategoriler .row,
#main #kategoriler2 .row,
.sektorel-content-article .row {
display: flex;
flex-wrap: wrap;
}
#main #kategoriler .row > [class*="col-"],
#main #kategoriler2 .row > [class*="col-"],
.sektorel-content-article .row > [class*="col-"] {
display: flex;
}
#main #kategoriler .row > .col-md-4 > a,
#main #kategoriler2 .row > .col-md-4 > a {
width: 100%;
display: flex;
}
#main #kategoriler .row > .col-md-4 > a > .item,
#main #kategoriler2 .row > .col-md-4 > a > .item {
width: 100%;
flex: 1 1 auto;
}
/* ---------- Firma Profili alt sayfaları (tedarikçiler, sertifikalar vb. kart listeleri) ---------- */
.sektorel-content-article .col-md-4 > .item,
.sektorel-content-article .col-md-3 > .item {
border: 1px solid var(--line) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow-sm);
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
display: flex;
flex-direction: column;
justify-content: center;
}
.sektorel-content-article .col-md-4 > .item:hover,
.sektorel-content-article .col-md-3 > .item:hover {
border-color: var(--accent) !important;
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.sektorel-content-article .item img {
max-height: 90px;
width: auto !important;
object-fit: contain;
margin-bottom: 10px !important;
}
.sektorel-content-article .item h4 {
color: var(--brand);
font-weight: 700;
font-size: 15px;
margin: 6px 0 4px;
}
.sektorel-content-article .item .detay {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.sektorel-content-article .item a { text-decoration: none; }
/* KVKK gibi sayfalarda Word'den yapıştırılmış ham içerik (piksel-sabit
tablolar, Times New Roman, p1/td1 gibi Word-export class'ları) tasarım
sistemimizi eziyor; içeriğin kendisine dokunmadan CSS ile normalize
ediyoruz. */
.sektorel-article p,
.sektorel-article span,
.sektorel-article td,
.sektorel-article th,
.sektorel-article li {
font-family: 'Open Sans', sans-serif !important;
font-size: 14.5px !important;
line-height: 1.75 !important;
color: var(--ink) !important;
}
.sektorel-article h1 {
font-family: 'Poppins', sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--brand) !important;
text-align: left !important;
margin: 0 0 18px !important;
}
.sektorel-article table {
width: 100% !important;
max-width: 100%;
table-layout: auto !important;
margin: 16px 0;
}
.sektorel-article td, .sektorel-article th {
width: auto !important;
height: auto !important;
border-color: var(--line) !important;
padding: 10px !important;
vertical-align: middle !important;
}
/* ---------- arama sonuçları ---------- */
.mt-search-query {
text-decoration: none !important;
color: var(--muted);
font-weight: 400 !important;
font-size: 14px;
margin-bottom: 20px !important;
}
.mt-search-query::before {
content: none;
}
.arama-item {
background: var(--bg-soft);
border-radius: var(--radius-sm);
padding: 16px 20px;
margin-bottom: 4px;
}
.arama-item h4 {
color: var(--brand);
font-weight: 700;
margin: 0 0 6px;
}
.arama-item + hr {
display: none;
}
.mt-search-empty {
text-align: center;
padding: 60px 20px;
color: var(--muted);
}
.mt-search-empty p {
font-size: 16px;
margin-bottom: 20px;
}
/* Bosch ürün listelerinde dikey/yatay görselleri ayrım yapmadan (eskiden
her ürün için uzak sunucuya getimagesize() isteği atılarak tespit
ediliyordu — büyük performans sorunuydu) düzgün sığdırır. */
.mt-bosch-auto-size {
max-height: 150px;
width: auto !important;
max-width: 100%;
object-fit: contain;
}
/* ---------- teknik blog / haberler liste kartları ---------- */
.mt-blog-card,
.haber {
float: left;
background: #fff !important;
border: 1px solid var(--line);
border-radius: var(--radius) !important;
padding: 16px !important;
margin-bottom: 24px !important;
box-shadow: var(--shadow-sm);
transition: box-shadow .25s var(--ease), transform .25s var(--ease);
width: 100%;
}
.mt-blog-card:hover,
.haber:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.mt-blog-card .baslik,
.haber h4 {
color: var(--brand) !important;
}
.mt-blog-card img,
.haber img {
border-radius: var(--radius-sm) !important;
border-color: var(--line) !important;
}
/* ---------- sektörel / mühendislik detay sayfaları ---------- */
#main .page-article .page-content-left ul li {
position: relative;
transition: background .2s var(--ease);
}
#main .page-article .page-content-left ul li.active {
background: var(--bg-soft);
}
#main .page-article .page-content-left ul li.active a {
color: var(--accent) !important;
}
#main .page-article .page-content-left ul li.active:before {
background: var(--accent) !important;
width: 4px !important;
}
.sektorel-article img {
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
}
@media (max-width: 600px) {
.sektorel-article img {
float: none !important;
display: block;
margin: 0 auto 16px !important;
width: 100% !important;
max-width: 320px;
}
}
.sektorel-article {
font-size: 15px;
color: var(--ink);
line-height: 1.75;
}
.sektorel-article p { margin-bottom: 14px; }
.sektorel-article table {
border-collapse: collapse;
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.sektorel-article table tr:nth-child(odd) { background-color: var(--bg-soft) !important; }
.sektorel-article table tr .head { background-color: var(--brand) !important; }
#main .urunler-detay-katalog-article {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 12px 16px;
transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
#main .urunler-detay-katalog-article:hover {
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
border-color: var(--accent);
}
#main .urunler-detay-katalog-article span { color: var(--brand) !important; }
/* ---------- ürün detay sayfası ---------- */
#main .urun-detay-title h2 {
font-family: 'Poppins', sans-serif;
font-size: 26px !important;
font-weight: 700 !important;
color: var(--brand);
border-bottom: 3px solid var(--accent-2);
display: inline-block;
padding-bottom: 8px;
}
#main .mainphoto {
border-radius: var(--radius) !important;
box-shadow: var(--shadow-sm);
}
#main .urunler-detay-content .content > p {
font-size: 15px;
line-height: 1.8;
color: var(--ink);
}
#main .urungrup {
background: var(--bg-soft);
border-radius: var(--radius);
padding: 20px 24px !important;
margin-top: 20px !important;
}
#main .urungrup h4 {
color: var(--brand);
font-weight: 700;
margin-bottom: 10px;
}
.hashtag {
transition: transform .2s var(--ease), background .2s var(--ease);
border-radius: 30px !important;
}
.hashtag:hover {
background: var(--accent) !important;
transform: translateY(-2px);
}
#main .urunler-detay-content a[href="teklif-formu"],
#main .urunler-detay-content a[href="request-for-quotation"] {
background: var(--accent-2) !important;
border: none !important;
border-radius: 30px !important;
font-weight: 600 !important;
padding: 0 24px !important;
box-shadow: var(--shadow-sm);
transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
#main .urunler-detay-content a[href="teklif-formu"]:hover,
#main .urunler-detay-content a[href="request-for-quotation"]:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ---------- iletişim sayfası ---------- */
#main .page-content-article h3 {
color: var(--brand);
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 20px;
}
#main .page-content-article hr {
border-top: 1px solid var(--line);
margin-top: 8px;
}
#main .iletisim-article-box {
background: var(--bg-soft);
border-radius: var(--radius);
padding: 20px 22px;
margin-bottom: 20px;
border-top: 3px solid var(--accent);
}
#main .iletisim-article-box-title h2 {
display: flex;
align-items: center;
font-size: 16px !important;
color: var(--brand) !important;
}
#main .iletisim-article-box-title h2 img { width: 22px; margin-right: 10px !important; }
#main .iletisim-article-box-content p {
line-height: 1.75;
font-size: 14.5px;
}
#main .iletisim-article-box-content span { margin-left: 32px !important; display: inline-block; }
#main .iletisim-article-box-map {
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-md);
}
/* ---------- 404 sayfası ---------- */
.mt-404 {
text-align: center;
padding: 60px 20px 90px;
}
.mt-404-code {
font-family: 'Poppins', sans-serif;
font-size: clamp(80px, 16vw, 160px);
font-weight: 800;
line-height: 1;
color: var(--brand);
opacity: .1;
margin-bottom: -10px;
}
.mt-404 h3 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
color: var(--brand);
font-size: 24px;
margin-top: 0;
}
.mt-404 h5 {
color: var(--muted);
font-weight: 400;
margin-bottom: 30px;
}
.mt-404-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.mt-404-btn {
padding: 12px 26px;
border-radius: 30px;
border: 1px solid var(--brand);
color: var(--brand);
font-weight: 600;
font-size: 14px;
transition: all .25s var(--ease);
}
.mt-404-btn:hover {
background: var(--brand);
color: #fff;
transform: translateY(-2px);
}
.mt-404-btn.primary {
background: var(--brand);
color: #fff;
}
.mt-404-btn.primary:hover {
background: var(--accent);
border-color: var(--accent);
}
/* ---------- redüktör seçim programı (harici link banner) ---------- */
.sektorel-content-article > a {
display: block;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow .3s var(--ease), transform .3s var(--ease);
position: relative;
}
.sektorel-content-article > a:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.sektorel-content-article > a img {
transition: transform .5s var(--ease);
display: block;
}
.sektorel-content-article > a:hover img {
transform: scale(1.02);
}
/* ---------- arama overlay ---------- */
.mt-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 4px 8px;
line-height: 1;
vertical-align: middle;
cursor: pointer;
transition: transform .2s var(--ease);
}
.mt-search-toggle:hover { transform: scale(1.1); }
.mt-search-toggle img { height: 18px; width: auto; filter: brightness(0) invert(1); opacity: .85; display: block; }
/* Üst bar (.container.topnav) eski kodda float+absolute tabanlıydı ve
mobil genişliklerde (WEB SHOP butonu, dilbolge vb. için) kendine özgü
position:absolute kuralları vardı. Flex düzenimiz bunlarla çakışıp
mobilde üst üste binme yarattığı için SADECE masaüstünde (>=992px)
uyguluyoruz; mobil orijinal (önceden çalışan) davranışını korur. */
@media (min-width: 992px) {
.container.topnav {
display: flex !important;
align-items: center !important;
flex-wrap: wrap;
}
/* Sıra: [shop] ... auto-boşluk ... [Arama] [TR/EN] [hamburger] — arama
TR/EN'in solunda, TR/EN en sağda durur. */
.container.topnav .mov { order: 1; }
.container.topnav .searchbar {
order: 2;
margin: 0 0 0 auto !important;
position: static !important;
float: none !important;
left: auto !important;
top: auto !important;
display: flex;
align-items: center;
}
.container.topnav .dilbolge {
order: 3;
position: static !important;
margin: 0 0 0 16px !important;
padding-left: 16px !important;
border-left: 1px solid rgba(255,255,255,.15);
display: flex;
align-items: center;
}
.container.topnav .navbar-header { order: 4; }
}
.dilbolge a {
opacity: .6;
font-weight: 600;
}
.dilbolge a.mt-dil-active {
opacity: 1;
color: var(--accent-2) !important;
}
.mt-search-overlay {
position: fixed;
inset: 0;
background: rgba(9, 17, 38, .96);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .3s var(--ease), visibility .3s var(--ease);
z-index: 999999;
}
.mt-search-overlay.mt-active {
opacity: 1;
visibility: visible;
}
.mt-search-form {
width: 90%;
max-width: 640px;
display: flex;
align-items: center;
border-bottom: 2px solid rgba(255,255,255,.3);
padding-bottom: 14px;
transition: border-color .25s var(--ease);
}
.mt-search-form:focus-within { border-color: var(--accent); }
.mt-search-form input {
flex: 1;
background: none;
border: none;
outline: none;
color: #fff;
font-size: clamp(20px, 4vw, 32px);
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
.mt-search-form input::placeholder { color: rgba(255,255,255,.4); }
.mt-search-form button {
background: none;
border: none;
cursor: pointer;
}
.mt-search-form button img { height: 24px; width: auto; filter: brightness(0) invert(1); }
.mt-search-close {
position: absolute;
top: 26px;
right: 30px;
background: none;
border: none;
color: #fff;
font-size: 34px;
line-height: 1;
cursor: pointer;
opacity: .7;
transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.mt-search-close:hover { opacity: 1; transform: rotate(90deg); }
body.mt-search-open { overflow: hidden; }
/* ---------- breadcrumb (banner-box .slogan p) ---------- */
#main .banner-box .slogan p,
#main #banner .slogan p {
font-size: 13.5px;
letter-spacing: .3px;
opacity: .85;
}
#main .banner-box .slogan p a,
#main #banner .slogan p a {
opacity: .8;
padding-bottom: 1px;
border-bottom: 1px solid transparent;
transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
#main .banner-box .slogan p a:hover,
#main #banner .slogan p a:hover {
opacity: 1;
text-decoration: none !important;
border-bottom-color: rgba(255,255,255,.6);
}
/* ---------- teklif formu (MS Forms embed) ---------- */
#main .iletisim-article-box-contact {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow-sm);
}
#main .iletisim-article-box-contact iframe {
border-radius: var(--radius-sm);
}
#main .newstyle .items {
border-radius: var(--radius-sm);
overflow: hidden;
box-shadow: var(--shadow-sm);
margin-bottom: 20px;
}
#main .newstyle .items img {
background: var(--bg-soft);
padding: 14px;
}
#main .newstyle .items .titlearea {
background: var(--brand) !important;
}
/* ---------- footer ---------- */
#footer {
background: linear-gradient(160deg, var(--brand) 0%, #081127 100%);
padding: 36px 0 0;
height: auto;
}
#footer a { transition: opacity .25s var(--ease), color .25s var(--ease); }
#footer a:hover { opacity: .8; }
.mt-footer-top {
padding-bottom: 18px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.mt-footer-top::after {
content: '';
display: table;
clear: both;
}
.mt-footer-col {
margin-bottom: 16px;
min-width: 0;
}
.mt-footer-col > * {
display: block;
margin-bottom: 8px;
}
.mt-footer-col h5 {
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: .3px;
margin: 0 0 6px;
text-transform: uppercase;
opacity: .9;
}
.mt-footer-col a {
color: rgba(255,255,255,.75);
font-size: 14px;
line-height: 1.6;
}
.mt-footer-col a:hover { color: #fff; opacity: 1; }
.mt-footer-logo {
max-width: 180px;
height: auto;
filter: brightness(0) invert(1);
opacity: .95;
}
.mt-footer-social { margin-bottom: 4px; display: flex; gap: 8px; }
.mt-footer-social a {
width: 40px;
height: 40px;
padding: 10px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
margin-right: 0;
transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mt-footer-social a:hover {
background: rgba(255,255,255,.18);
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(0,0,0,.25);
transform: translateY(-2px);
}
.mt-footer-social a img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; }
.mt-footer-social a:hover img { opacity: 1; }
.mt-footer-col a.kvkk { font-size: 12.5px; opacity: .6; }
.mt-footer-bottom {
padding: 12px 0;
overflow: hidden;
}
#footer .copyright {
opacity: .6;
font-size: 12.5px;
color: #fff;
text-align: center !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
line-height: 1.4 !important;
float: none;
}
/* quote CTA tab */
.formagit {
border-radius: 12px 0 0 12px;
box-shadow: var(--shadow-lg);
}
/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* skip-to-content link */
.mt-skip-link {
position: absolute;
top: -60px;
left: 10px;
background: var(--brand);
color: #fff !important;
padding: 10px 20px;
border-radius: 0 0 8px 8px;
font-weight: 600;
font-size: 14px;
z-index: 9999999;
transition: top .2s var(--ease);
}
.mt-skip-link:focus {
top: 0;
outline: 2px solid var(--accent-2);
outline-offset: -2px;
}
/* ==========================================================================
Scroll reveal
========================================================================== */
.mt-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
will-change: opacity, transform;
}
.mt-reveal-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.mt-reveal { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
Back to top button
========================================================================== */
.mt-to-top {
position: fixed;
right: 24px;
bottom: 24px;
width: 46px;
height: 46px;
border-radius: 50%;
border: none;
background: var(--brand);
color: #fff;
font-size: 20px;
line-height: 1;
box-shadow: var(--shadow-md);
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s var(--ease);
z-index: 9999;
}
.mt-to-top.mt-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.mt-to-top:hover { background: var(--accent); }
/* ==========================================================================
Image fade-in
========================================================================== */
.mt-img-loading { opacity: 0; }
img { transition: opacity .35s var(--ease); }
/* ==========================================================================
Typography fine-tuning (hero + section titles)
========================================================================== */
#main #banner #main-slider-content .item span {
font-size: clamp(22px, 4.2vw, 44px);
line-height: 1.15;
letter-spacing: -.5px;
}
#main #banner #main-slider-content .item {
font-size: clamp(13px, 1.6vw, 16px);
letter-spacing: .3px;
opacity: .92;
}
#main #kurumsal .baslik {
font-size: clamp(22px, 3vw, 30px);
letter-spacing: -.3px;
}
#main #kategoriler .baslik, #main #altbilgi .baslik {
font-size: clamp(21px, 2.6vw, 28px);
letter-spacing: -.3px;
}
#main #bilgi .item .aciklama {
letter-spacing: -.5px;
}
#main #bilgi .item .aciklama span {
font-weight: 500;
opacity: .85;
}
/* ==========================================================================
Floating quote button (.formagit)
========================================================================== */
.formagit {
border-radius: 50px 0 0 50px;
animation: mt-pulse 2.6s ease-in-out infinite;
}
.formagit:hover { animation: none; }
@keyframes mt-pulse {
0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(30,162,222,.35); }
50% { box-shadow: var(--shadow-lg), 0 0 0 10px rgba(30,162,222,0); }
}
/* ==========================================================================
Mobile menu — slide-in drawer
========================================================================== */
@media (max-width: 1025px) {
/* header'ın kendi z-index:300 (position:relative) tanımı bir stacking
context oluşturuyor; içindeki çekmecenin z-index:99999'u SADECE
header İÇİNDEKİ öğelere göre geçerli. Backdrop body seviyesinde
99998 olduğu için header'ın (300) TAMAMININ önüne geçip hem çekmeceyi
görsel olarak bastırıyor hem de tüm dokunuşları yutuyordu. Backdrop'u
header'ın altında (ama normal sayfa içeriğinin üstünde) tutuyoruz. */
.mt-mobile-backdrop {
position: fixed;
inset: 0;
background: rgba(9, 17, 38, .55);
opacity: 0;
pointer-events: none;
transition: opacity .3s var(--ease);
z-index: 260;
}
body.mt-mobile-menu-open .mt-mobile-backdrop {
opacity: 1;
pointer-events: auto;
}
body.mt-mobile-menu-open {
overflow: hidden;
}
/* Bootstrap'ın collapse eklentisi bu elementin height'ını JS ile 0'a
animasyonluyor (inline style). Sabit bir çekmece için bu davranışla
yarışmak yerine display/height'ı her zaman zorluyoruz; açık/kapalı
durumu tamamen visibility+transform ile, Bootstrap'ın state'inden
bağımsız olarak biz yönetiyoruz. */
.navbar .navbar-collapse {
display: block !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
width: 82% !important;
max-width: 340px;
height: 100vh !important;
max-height: none !important;
margin: 0 !important;
padding: 70px 0 30px !important;
background: linear-gradient(180deg, var(--brand) 0%, #081127 100%) !important;
box-shadow: var(--shadow-lg);
overflow-y: auto !important;
transform: translate3d(100%, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
visibility: hidden;
transition: transform .35s var(--ease), visibility 0s linear .35s;
z-index: 99999 !important;
}
body.mt-mobile-menu-open .navbar .navbar-collapse {
transform: translate3d(0, 0, 0);
visibility: visible;
transition: transform .35s var(--ease);
}
.navbar .navbar-nav.mbl {
display: block !important;
background: none !important;
height: auto !important;
margin-top: 0 !important;
top: 0 !important;
text-align: left !important;
}
.navbar-default .navbar-nav > li > a {
text-align: left !important;
padding: 12px 26px !important;
font-size: 15px !important;
}
.navbar-nav > li > .dropdown-menu {
background: rgba(255,255,255,.05) !important;
box-shadow: none;
}
}
/* ==========================================================================
Trust bar (tedarikçi / marka logo şeridi)
========================================================================== */
#main #altbilgi .ebulten .logo {
padding: 10px 0;
}
#main #altbilgi .ebulten .logo span {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 10px 14px;
margin-right: 10px;
}
#main #altbilgi .ebulten .logo span img {
max-height: 40px;
transition: transform .25s var(--ease);
}
#main #altbilgi .ebulten .logo span:hover img {
transform: translateY(-2px);
}
/* ==========================================================================
Responsive hardening — tüm cihazlarda taşma/kırılma olmaması için
========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
/* CMS içeriğinden gelen (inline genişlikli) görseller taşmasın */
.yazi img, .page-content-right img, .productcontent img,
.sektorel-article img, #main .page-article img {
max-width: 100% !important;
height: auto !important;
}
/* CMS içeriğindeki ham 'lar dar ekranda sayfayı germesin,
kendi içinde yatay kaysın */
.yazi table, .page-content-right table, .sektorel-article table,
.productcontent table {
display: block;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* uzun kelime/URL içeren başlık ve metinler taşmasın */
#main #kategoriler .item h3, #main #kategoriler .item h4, #main #kategoriler2 .item h4,
#main #kurumsal .baslik, #main .baslik,
.urunler-content-article-box-bottom-title h2 {
overflow-wrap: break-word;
word-break: break-word;
}
/* çok dar ekranlarda (<=375px) hero ve istatistik alanı sıkışmasın */
@media (max-width: 375px) {
#main #banner #main-slider-content .item { padding-left: 10px; padding-right: 10px; }
#main #bilgi .item .aciklama { font-size: 28px; }
.mt-to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
.formagit { width: 100% !important; }
}
@media (max-width: 1025px) {
header .middle {
box-shadow: none !important;
}
header .top {
border-bottom: none !important;
}
header .bottom {
position: relative;
background: transparent !important;
height: 0 !important;
min-height: 0 !important;
overflow: visible;
}
.navbar,
.navbar-default {
background: transparent !important;
}
/* mobilde sosyal ikonlar karmaşık arka plan resminin üzerinde kayboluyordu,
arkalarına kontrast sağlayan koyu bir daire ekliyoruz */
header .middle .social {
display: flex !important;
justify-content: center;
gap: 10px;
padding-top: 6px !important;
}
header .middle .social a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 3px 8px rgba(0,0,0,.2);
margin-left: 0 !important;
}
header .middle .social a img {
width: 18px !important;
height: 18px !important;
filter: brightness(0) invert(1);
}
}
/* Hero görseli mobilde sabit 350px'ti; büyütülmüş başlık metni + buton bu
alana sığmayıp kesiliyordu. Daha fazla dikey alan veriyoruz. */
@media (max-width: 1025px) {
#main #banner #main-slider .item img,
#main .banner .slick-slide img {
height: 480px !important;
object-fit: cover;
}
}
/* style.css'teki eski mobil kural (top:-20%) başlığı görselin üstüne değil
header'ın üzerine taşıyordu — eski (artık kaldırılmış) fixed-menu header
tasarımı için ayarlanmıştı. Başlığı görselin içine, ortaya alıyoruz. */
@media (max-width: 1025px) {
#main #banner #main-slider-content {
top: 50% !important;
transform: translateY(-50%);
}
}
@media (max-width: 480px) {
#main #banner #main-slider .item img,
#main .banner .slick-slide img {
height: 420px !important;
}
}
/* Mobilde header ile hero görseli arasında (birkaç eski margin-top
kuralının çakışmasından kaynaklanan) bir boşluk/kayma varsa bile gri
yerine markaya uygun koyu zemin görünsün diye #banner'a arka plan
veriyoruz — kaynağı ne olursa olsun görsel sorunu ortadan kaldırır. */
@media (max-width: 1025px) {
#main #banner {
background: var(--brand);
/* style.css'teki koşulsuz margin-top:20px, header artık doğru
(auto) yüksekliğiyle bittiği için header ile hero arasında
gri bir boşluk olarak görünüyordu — mobilde kapatıyoruz. */
margin-top: 0 !important;
}
#main #banner .slider,
#main #banner #main-slider {
background: var(--brand);
}
}
/* Hero'daki hızlı ürün linkleri (.katlink) ve başlık metni ikisi de
bağımsız position:absolute; dar ekranlarda üst üste biniyor. Bu
kısayollar zaten ana menüde ve sayfa altındaki ürün kartlarında da
var — çok dar ekranlarda gizleyip başlığa alan açıyoruz. */
@media (max-width: 576px) {
#main #banner .katlink {
display: none !important;
}
}
/* çok geniş ekranlarda (4K/ultra-wide) içerik aşırı yayılmasın */
@media (min-width: 1921px) {
#main #banner .container,
#main #kurumsal .container,
#main #kategoriler .container,
#main #altbilgi .container {
max-width: 1600px;
}
}
/* tablet ara boyut (768-1024) için ürün kartı görsel yüksekliği */
@media (min-width: 768px) and (max-width: 1024px) {
#main #kategoriler .item img, #main #kategoriler2 .item img {
height: 200px;
padding: 6px;
}
}
/* dokunmatik cihazlarda hover'a bağlı davranışları garanti altına al */
@media (hover: none) {
#main #kategoriler .item .detay,
#main #kategoriler2 .item .detay {
color: var(--accent) !important;
}
}