.mnm-root{
--mnm-bg:#ffffff;
--mnm-text:#15151a;
--mnm-muted:#6b6b70;
--mnm-border:rgba(0,0,0,.08);
font-family: var(--awb-fusion-font-family-typography) !important;
}
.mnm-root *{box-sizing:border-box;}
/* ===== Trigger button ===== */
.mnm-topbar{
display:flex;
align-items:center;
justify-content:flex-end;
}
.mnm-burger{
width:32px;height:32px;
background:none;border:none;
display:flex;flex-direction:column;justify-content:center;gap:6px;
cursor:pointer;
padding:0;
}
.mnm-burger span{
display:block;height:2px;width:100%;background:#15151a;
transition:transform .3s ease, opacity .3s ease;
}
.mnm-burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.mnm-burger.active span:nth-child(2){opacity:0;}
.mnm-burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
/* ===== Menu overlay ===== */
.mnm-overlay{
position:fixed;
top:0;left:0;right:0;bottom:0;
background:var(--mnm-bg);
z-index:99999;
display:flex;
flex-direction:column;
transform:translateY(100%);
transition:transform .45s cubic-bezier(.65,0,.35,1);
overflow:hidden;
visibility:hidden;
box-shadow:0 0 30px rgba(0,0,0,.12);
}
.mnm-overlay.open{
transform:translateY(0);
visibility:visible;
}
.mnm-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 20px;
flex-shrink:0;
}
.mnm-header .mnm-logo{font-size:22px;font-weight:600;color:var(--mnm-text);letter-spacing:.5px;}
.mnm-header .mnm-actions{display:flex;gap:18px;align-items:center;}
.mnm-icon-btn{
background:none;border:none;color:var(--mnm-text);cursor:pointer;
display:flex;align-items:center;justify-content:center;
width:28px;height:28px;
padding:0;
}
.mnm-icon-btn svg{width:22px;height:22px;}
/* ===== Panels container (slides left/right) ===== */
.mnm-panels{
position:relative;
flex:1;
overflow:hidden;
}
.mnm-panel{
position:absolute;
top:0;left:0;
width:100%;height:100%;
overflow-y:auto;
padding:10px 20px 40px;
transform:translateX(0);
transition:transform .4s cubic-bezier(.65,0,.35,1);
background:var(--mnm-bg);
}
.mnm-panel.mnm-sub{
transform:translateX(100%);
}
.mnm-panel.mnm-sub.active{
transform:translateX(0);
}
.mnm-panel.mnm-main.shift{
transform:translateX(-100%);
}
.mnm-back-btn{
display:flex;
align-items:center;
gap:8px;
color:var(--mnm-muted);
background:none;border:none;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
padding:14px 0;
cursor:pointer;
}
.mnm-back-btn svg{
width:40px;
height:40px;
}
.mnm-sub-title{
color:var(--mnm-text);
font-size:26px;
font-weight:600;
padding:10px 0 16px;
}
.mnm-list{list-style:none;margin:0;padding:0;}
.mnm-list li{
border-bottom:1px solid var(--mnm-border);
}
.mnm-link{
display:flex;
align-items:center;
justify-content:space-between;
color:var(--mnm-text);
text-decoration:none;
font-size:28px;
padding:20px 0;
background:none;
border:none;
width:100%;
text-align:left;
cursor:pointer;
font-family: var(--awb-fusion-font-family-typography) !important;
}
.mnm-link svg{width:22px;height:22px;flex-shrink:0;color:var(--mnm-text);}
.mnm-sub-list{
list-style:none;
margin:0;
padding:0;
border-bottom: 1px solid #ddd;
}
.mnm-sub-list li{padding:0;}
.mnm-sub-list a{
display:block;
color:var(--mnm-muted);
text-decoration:none;
font-size:19px;
padding:14px 0;
}
/* ===== Language switcher (inside menu header) ===== */
.mnm-lang{
display:inline-flex;
align-items:center;
height:40px;
background:#f4f4f4;
border-radius:999px;
padding:3px;
box-sizing:border-box;
overflow:hidden;
}
.mnm-lang__en{
flex:0 0 auto;
width:34px;
height:34px;
border-radius:50%;
border:none;
background:#ebebeb;
color:#15151a;
font-size:14px;
font-weight:700;
letter-spacing:.02em;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:background .25s ease;
}
.mnm-lang__en:hover{background:#e0e0e0;}
.mnm-lang__options{
display:flex;
align-items:center;
gap:14px;
width:0;
opacity:0;
overflow:hidden;
white-space:nowrap;
margin-left:0;
padding-right:0;
transition:width .35s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1), margin-left .35s cubic-bezier(.4,0,.2,1), padding-right .35s cubic-bezier(.4,0,.2,1);
}
.mnm-lang.is-open .mnm-lang__options{
opacity:1;
margin-left:12px;
padding-right:10px;
/* width is set inline by JS to the exact content width, so the transition has no dead time */
}
.mnm-lang__item{
font-size:14px;
font-weight:700;
text-decoration:none;
letter-spacing:.02em;
opacity:.9;
transition:opacity .2s ease;
}
.mnm-lang__item:hover{opacity:1; color: #000 !important}
.mnm-lang__item--es{color:#8c2f2f;}
.mnm-lang__item--fr{color:#1c2b52;}
.mnm-lang__item--de{color:#2f6b52;}
.mnm-lang__item--it{color:#c0432f;}
.mnm-lang__close{
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border:none;
background:transparent;
color:#15151a;
cursor:pointer;
padding:0;
opacity:.85;
transition:opacity .2s ease, transform .2s ease;
}
.mnm-lang__close:hover{opacity:1;transform:scale(1.1);}
(function(){
var burgerBtn = document.getElementById('mnmBurgerBtn');
var closeBtn = document.getElementById('mnmCloseBtn');
var overlay = document.getElementById('mnmOverlay');
var mainPanel = document.getElementById('mnmMainPanel');
if(!burgerBtn || !overlay) return;
function openMenu(){
overlay.classList.add('open');
burgerBtn.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeMenu(){
overlay.classList.remove('open');
burgerBtn.classList.remove('active');
document.body.style.overflow = '';
setTimeout(function(){
mainPanel.classList.remove('shift');
document.querySelectorAll('.mnm-panel.mnm-sub').forEach(function(p){
p.classList.remove('active');
});
}, 450);
}
burgerBtn.addEventListener('click', function(){
if(overlay.classList.contains('open')){
closeMenu();
} else {
openMenu();
}
});
if(closeBtn) closeBtn.addEventListener('click', closeMenu);
document.querySelectorAll('.mnm-link[data-target]').forEach(function(btn){
btn.addEventListener('click', function(){
var targetId = btn.getAttribute('data-target');
var target = document.getElementById(targetId);
mainPanel.classList.add('shift');
target.classList.add('active');
});
});
document.querySelectorAll('[data-back]').forEach(function(btn){
btn.addEventListener('click', function(){
var sub = btn.closest('.mnm-panel.mnm-sub');
sub.classList.remove('active');
mainPanel.classList.remove('shift');
});
});
// ===== Language switcher inside menu header =====
var langRoot = document.getElementById('mnmLang');
var langToggle = document.getElementById('mnmLangToggle');
var langClose = document.getElementById('mnmLangClose');
var langOptions = document.getElementById('mnmLangOptions');
if(langRoot && langToggle && langOptions){
function openLang(){
// measure the natural width of the content first (still 0 visually since width:0 is set)
langOptions.style.width = 'auto';
var natural = langOptions.scrollWidth;
langOptions.style.width = '0px';
// force reflow so the browser registers the 0px before we animate to natural width
langOptions.offsetWidth;
langRoot.classList.add('is-open');
langToggle.setAttribute('aria-expanded', 'true');
requestAnimationFrame(function(){
langOptions.style.width = natural + 'px';
});
}
function closeLang(){
langRoot.classList.remove('is-open');
langToggle.setAttribute('aria-expanded', 'false');
langOptions.style.width = '0px';
}
langToggle.addEventListener('click', function(e){
e.stopPropagation();
if(langRoot.classList.contains('is-open')){
closeLang();
} else {
openLang();
}
});
if(langClose){
langClose.addEventListener('click', function(e){
e.stopPropagation();
closeLang();
});
}
document.addEventListener('click', function(e){
if(!langRoot.contains(e.target)) closeLang();
});
}
})();
OTURMA GRUBU
MASALAR
AKSESUARLAR
Projeler