/* =========================================================  
   GENEL (Scoped to .mt-wrapper)
========================================================= */  

.mt-wrapper {
    font-family: "Inter", sans-serif;  
    background: #fff;  
    color: #111;  
    overflow-x: hidden; 
    position: relative;
    width: 100%;
    /* Değişkenler */
    --black: #080808;  
    --black-2: #101010;  
    --gold: #c9a45c;  
    --gold-light: #e1c27e;  
    --white: #ffffff;  
    --gray: #8e8e8e;  
    --light: #f5f5f3;  
    --border: rgba(255,255,255,.12);  
}

.mt-wrapper * {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
.mt-wrapper a {  
    text-decoration: none;  
    color: inherit;  
}  
  
.mt-wrapper button {  
    font-family: inherit;  
    border: none;
    background: transparent;
    cursor: pointer;
}  
  
.mt-wrapper .mt-container {  
    width: min(1180px, calc(100% - 48px));  
    margin: 0 auto;  
}  

/* =========================================================  
   HEADER  
========================================================= */  
  
.mt-wrapper .mt-header {  
    position: absolute;  
    top: 10px;  
    left: 50%;  
    transform: translateX(-50%);  
    width: min(1180px, calc(100% - 32px));  
    height: 52px;  
    z-index: 100;  
    border: 1px solid rgba(255,255,255,.08);  
    background: rgba(7,7,7,.82);  
    backdrop-filter: blur(14px);  
}  
  
.mt-wrapper .mt-header-inner {  
    height: 100%;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding: 0 20px;  
}  

/* =========================================================  
   LOGO  
========================================================= */  
  
.mt-wrapper .mt-logo {  
    display: flex;  
    align-items: center;  
    gap: 9px;  
}  
  
.mt-wrapper .mt-logo-mark {  
    position: relative;  
    font-size: 30px;  
    line-height: 1;  
    font-weight: 700;  
    letter-spacing: -4px;  
    color: var(--gold-light);  
}  
  
.mt-wrapper .mt-logo-mark span {  
    color: #fff;  
}  
  
.mt-wrapper .mt-logo-text {  
    display: flex;  
    flex-direction: column;  
    line-height: 1;  
}  
  
.mt-wrapper .mt-logo-title {  
    color: #fff;  
    font-size: 12px;  
    font-weight: 600;  
    letter-spacing: .5px;  
}  
  
.mt-wrapper .mt-logo-subtitle {  
    margin-top: 3px;  
    color: #999;  
    font-size: 5px;  
    letter-spacing: 2.5px;  
}  

/* =========================================================  
   NAVIGATION  
========================================================= */  
  
.mt-wrapper .mt-nav {  
    display: flex;  
    align-items: center;  
    gap: 30px;  
}  
  
.mt-wrapper .mt-nav a {  
    color: #ddd;  
    font-size: 10px;  
    font-weight: 400;  
    transition: .3s ease;  
}  
  
.mt-wrapper .mt-nav a:hover {  
    color: var(--gold-light);  
}  
  
.mt-wrapper .mt-header-button {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    border: 1px solid #8c6c31;  
    border-radius: 30px;  
    padding: 7px 10px 7px 17px;  
    color: #dfbd78;  
    font-size: 9px;  
    transition: .3s ease;  
}  
  
.mt-wrapper .mt-header-button span {  
    width: 22px;  
    height: 22px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    border-radius: 50%;  
    background: #dfbd78;  
    color: #111;  
    font-size: 12px;  
}  
  
.mt-wrapper .mt-header-button:hover {  
    background: var(--gold);  
    color: #111;  
}  
  
.mt-wrapper .mt-header-button:hover span {  
    background: #111;  
    color: var(--gold);  
}  

/* =========================================================  
   MOBILE MENU  
========================================================= */  
  
.mt-wrapper .mt-mobile-menu {  
    display: none;  
    width: 32px;  
    height: 32px;  
    border: 1px solid rgba(255,255,255,.2);  
    color: #fff;  
    border-radius: 5px;  
}  
  
.mt-wrapper .mt-mobile-menu span,  
.mt-wrapper .mt-mobile-menu span::before,  
.mt-wrapper .mt-mobile-menu span::after {  
    width: 15px;  
    height: 1px;  
    background: #fff;  
    display: block;  
    margin: auto;  
    position: relative;  
}  
  
.mt-wrapper .mt-mobile-menu span::before,  
.mt-wrapper .mt-mobile-menu span::after {  
    content: "";  
    position: absolute;  
    left: 0;  
}  
  
.mt-wrapper .mt-mobile-menu span::before { top: -5px; }  
.mt-wrapper .mt-mobile-menu span::after { top: 5px; }  

/* =========================================================  
   HERO  
========================================================= */  
  
.mt-wrapper .mt-hero {  
    min-height: 400px;  
    position: relative;  
    background:  
        radial-gradient(circle at 70% 55%, rgba(73,73,73,.22), transparent 34%),  
        radial-gradient(circle at 20% 90%, rgba(82,82,82,.10), transparent 35%),  
        #090909;  
    color: #fff;  
    overflow: hidden;  
}  
  
.mt-wrapper .mt-hero::after {  
    content: "";  
    position: absolute;  
    left: 0;  
    right: 0;  
    bottom: -100px;  
    height: 220px;  
    background: radial-gradient(ellipse, rgba(255,255,255,.04), transparent 70%);  
}  
  
.mt-wrapper .mt-hero-inner {  
    min-height: 400px;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding-top: 58px;  
}  
  
.mt-wrapper .mt-hero-content {  
    width: 48%;  
    position: relative;  
    z-index: 5;  
    animation: mtFadeUp .8s ease both;
}  
  
.mt-wrapper .mt-hero-label {  
    color: var(--gold-light);  
    font-size: 9px;  
    letter-spacing: 3px;  
    text-transform: uppercase;  
    margin-bottom: 13px;  
}  
  
.mt-wrapper .mt-hero h1 {  
    font-size: clamp(38px, 4vw, 57px);  
    line-height: .98;  
    letter-spacing: -2.8px;  
    font-weight: 500;  
    margin-bottom: 17px;  
}  
  
.mt-wrapper .mt-hero h1 span {  
    display: block;  
}  
  
.mt-wrapper .mt-hero-description {  
    max-width: 390px;  
    color: #aaa;  
    font-size: 12px;  
    line-height: 1.7;  
    margin-bottom: 22px;  
}  
  
.mt-wrapper .mt-hero-buttons {  
    display: flex;  
    gap: 12px;  
}  
  
.mt-wrapper .mt-btn {  
    display: inline-flex;  
    align-items: center;  
    justify-content: center;  
    gap: 13px;  
    min-width: 143px;  
    height: 34px;  
    padding: 0 16px;  
    border-radius: 7px;  
    font-size: 10px;  
    transition: .3s ease;  
}  
  
.mt-wrapper .mt-btn-gold {  
    background: linear-gradient(135deg, #dfc17f, #b28b47);  
    color: #151515;  
}  
  
.mt-wrapper .mt-btn-gold:hover {  
    transform: translateY(-2px);  
    box-shadow: 0 10px 30px rgba(205,164,88,.22);  
}  
  
.mt-wrapper .mt-btn-dark {  
    border: 1px solid #555;  
    color: #eee;  
}  
  
.mt-wrapper .mt-btn-dark:hover {  
    border-color: var(--gold);  
    color: var(--gold-light);  
}  

/* =========================================================  
   HERO MOCKUPS  
========================================================= */  
  
.mt-wrapper .mt-hero-visual {  
    position: relative;  
    width: 55%;  
    height: 330px;  
    animation: mtFadeUp 1s ease .15s both;
}  
  
.mt-wrapper .mt-laptop {  
    position: absolute;  
    width: 390px;  
    height: 245px;  
    left: 25px;  
    top: 48px;  
    transform: perspective(900px) rotateY(-8deg) rotateX(3deg);  
    background: linear-gradient(145deg, #333, #090909);  
    border-radius: 13px 13px 7px 7px;  
    border: 2px solid #555;  
    box-shadow: 0 30px 50px rgba(0,0,0,.7), 0 0 20px rgba(255,255,255,.04);  
    z-index: 2;  
}  
  
.mt-wrapper .mt-laptop-screen {  
    position: absolute;  
    left: 13px;  
    top: 12px;  
    right: 13px;  
    bottom: 22px;  
    border-radius: 5px;  
    overflow: hidden;  
    background: linear-gradient(135deg, #171717, #090909);  
}  
  
.mt-wrapper .mt-laptop-screen::before {  
    content: "MT";  
    position: absolute;  
    left: 25px;  
    top: 22px;  
    color: var(--gold);  
    font-size: 20px;  
    font-weight: 600;  
}  
  
.mt-wrapper .mt-laptop-screen::after {  
    content: "DİJİTAL FİKİRLER.\A GERÇEK SONUÇLAR.";  
    white-space: pre;  
    position: absolute;  
    left: 25px;  
    top: 72px;  
    color: #eee;  
    font-size: 18px;  
    line-height: 1.15;  
    font-weight: 500;  
}  
  
.mt-wrapper .mt-laptop-base {  
    position: absolute;  
    left: -35px;  
    right: -35px;  
    bottom: -12px;  
    height: 20px;  
    background: linear-gradient(#5b5b5b, #181818);  
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);  
    border-radius: 0 0 15px 15px;  
}  

/* =========================================================  
   PHONE  
========================================================= */  
  
.mt-wrapper .mt-phone {  
    position: absolute;  
    width: 94px;  
    height: 190px;  
    border-radius: 17px;  
    background: #0d0d0d;  
    border: 2px solid #555;  
    box-shadow: 0 20px 40px rgba(0,0,0,.7);  
    overflow: hidden;  
    z-index: 4;  
}  
  
.mt-wrapper .mt-phone-1 {  
    right: 120px;  
    top: 72px;  
    transform: rotate(-4deg);  
}  
  
.mt-wrapper .mt-phone-2 {  
    right: 22px;  
    top: 36px;  
    transform: rotate(5deg);  
}  
  
.mt-wrapper .mt-phone-screen {  
    position: absolute;  
    left: 5px;  
    right: 5px;  
    top: 5px;  
    bottom: 5px;  
    border-radius: 13px;  
    background: linear-gradient(160deg, #202020, #080808);  
    overflow: hidden;  
}  
  
.mt-wrapper .mt-phone-screen::before {  
    content: "MT";  
    position: absolute;  
    left: 13px;  
    top: 20px;  
    font-size: 14px;  
    color: var(--gold);  
}  
  
.mt-wrapper .mt-phone-screen::after {  
    content: "STRATEJİ.\A TASARIM.\A SONUÇ.";  
    white-space: pre;  
    position: absolute;  
    left: 13px;  
    top: 55px;  
    color: white;  
    font-size: 11px;  
    line-height: 1.25;  
}  

/* =========================================================  
   SERVICES  
========================================================= */  
  
.mt-wrapper .mt-services {  
    background: #fff;  
    padding: 28px 0 18px;  
}  
  
.mt-wrapper .mt-section-heading {  
    text-align: center;  
}  
  
.mt-wrapper .mt-section-label {  
    color: #c09b57;  
    font-size: 8px;  
    letter-spacing: 2px;  
    text-transform: uppercase;  
    margin-bottom: 5px;  
}  
  
.mt-wrapper .mt-section-heading h2 {  
    font-size: 21px;  
    font-weight: 500;  
    letter-spacing: -.8px;  
}  
  
.mt-wrapper .mt-section-heading p {  
    color: #888;  
    font-size: 10px;  
    margin-top: 6px;  
}  
  
.mt-wrapper .mt-services-grid {  
    margin-top: 12px;  
    display: grid;  
    grid-template-columns: repeat(5, 1fr);  
}  
  
.mt-wrapper .mt-service-card {  
    min-height: 83px;  
    padding: 0 25px;  
    border-right: 1px solid #e5e5e5;  
    text-align: left;  
}  
  
.mt-wrapper .mt-service-card:last-child {  
    border-right: none;  
}  
  
.mt-wrapper .mt-service-icon {  
    width: 29px;  
    height: 29px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    margin-bottom: 6px;  
    color: #222;  
    border: 1px solid #222;  
    border-radius: 5px;  
    position: relative;  
}  
  
.mt-wrapper .mt-service-icon::after {  
    content: "";  
    position: absolute;  
    width: 7px;  
    height: 7px;  
    border-radius: 50%;  
    background: var(--gold);  
    right: -3px;  
    top: -3px;  
}  
  
.mt-wrapper .mt-service-card h3 {  
    font-size: 10px;  
    font-weight: 600;  
    margin-bottom: 5px;  
}  
  
.mt-wrapper .mt-service-card p {  
    color: #888;  
    font-size: 7px;  
    line-height: 1.55;  
}  

/* =========================================================  
   PROJECTS  
========================================================= */  
  
.mt-wrapper .mt-projects {  
    background: #fff;  
    padding: 8px 0 40px;  
}  
  
.mt-wrapper .mt-projects-top {  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    margin-bottom: 10px;  
}  
  
.mt-wrapper .mt-projects-title {  
    display: flex;  
    flex-direction: column;  
}  
  
.mt-wrapper .mt-projects-title span {  
    color: #c09b57;  
    font-size: 8px;  
    letter-spacing: 2px;  
    margin-bottom: 4px;  
}  
  
.mt-wrapper .mt-projects-title h2 {  
    font-size: 16px;  
    font-weight: 500;  
}  
  
.mt-wrapper .mt-all-projects {  
    border: 1px solid #bbb;  
    border-radius: 20px;  
    padding: 7px 13px;  
    font-size: 8px;  
    transition: .3s;  
}  
  
.mt-wrapper .mt-all-projects:hover {  
    background: #111;  
    border-color: #111;  
    color: white;  
}  
  
.mt-wrapper .mt-projects-grid {  
    display: grid;  
    grid-template-columns: repeat(4, 1fr);  
    gap: 12px;  
}  
  
.mt-wrapper .mt-project-card {  
    position: relative;  
    height: 140px;  
    overflow: hidden;  
    border-radius: 8px;  
    background: #111;  
    cursor: pointer;  
}  
  
.mt-wrapper .mt-project-bg {  
    position: absolute;  
    inset: 0;  
    transition: .5s ease;  
}  
  
.mt-wrapper .mt-project-card:nth-child(1) .mt-project-bg {  
    background: linear-gradient(135deg, #161616, #333);  
}  
.mt-wrapper .mt-project-card:nth-child(2) .mt-project-bg {  
    background: linear-gradient(135deg, #dad5cc, #8c877d);  
}  
.mt-wrapper .mt-project-card:nth-child(3) .mt-project-bg {  
    background: linear-gradient(135deg, #28332d, #111);  
}  
.mt-wrapper .mt-project-card:nth-child(4) .mt-project-bg {  
    background: linear-gradient(135deg, #27221e, #070707);  
}  
  
.mt-wrapper .mt-project-card:hover .mt-project-bg {  
    transform: scale(1.06);  
}  
  
.mt-wrapper .mt-project-content {  
    position: absolute;  
    left: 14px;  
    right: 14px;  
    bottom: 12px;  
    color: #fff;  
    z-index: 2;  
}  
  
.mt-wrapper .mt-project-content::before {  
    content: "";  
    position: absolute;  
    inset: -80px -15px -15px;  
    background: linear-gradient(transparent, rgba(0,0,0,.75));  
    z-index: -1;  
}  
  
.mt-wrapper .mt-project-category {  
    font-size: 7px;  
    color: #ccc;  
    margin-bottom: 3px;  
}  
  
.mt-wrapper .mt-project-name {  
    font-size: 10px;  
    font-weight: 500;  
}  
  
.mt-wrapper .mt-project-arrow {  
    position: absolute;  
    right: 0;  
    bottom: 0;  
    width: 21px;  
    height: 21px;  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    background: rgba(255,255,255,.9);  
    color: #111;  
    font-size: 11px;  
}  

/* =========================================================  
   ABOUT  
========================================================= */  
  
.mt-wrapper .mt-about {  
    padding: 90px 0;  
    background: #0a0a0a;  
    color: #fff;  
}  
  
.mt-wrapper .mt-about-grid {  
    display: grid;  
    grid-template-columns: 1fr 1fr;  
    gap: 80px;  
    align-items: center;  
}  
  
.mt-wrapper .mt-about-label {  
    color: var(--gold);  
    font-size: 9px;  
    letter-spacing: 3px;  
    margin-bottom: 15px;  
}  
  
.mt-wrapper .mt-about h2 {  
    font-size: 40px;  
    line-height: 1.05;  
    font-weight: 500;  
    letter-spacing: -2px;  
}  
  
.mt-wrapper .mt-about p {  
    color: #888;  
    font-size: 13px;  
    line-height: 1.8;  
    margin-top: 20px;  
}  
  
.mt-wrapper .mt-about-box {  
    height: 320px;  
    border: 1px solid rgba(255,255,255,.1);  
    background: radial-gradient(circle at center, rgba(201,164,92,.16), transparent 55%);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  
  
.mt-wrapper .mt-about-logo {  
    font-size: 90px;  
    font-weight: 700;  
    color: var(--gold);  
    letter-spacing: -12px;  
}  

/* =========================================================  
   PROCESS  
========================================================= */  
  
.mt-wrapper .mt-process {  
    padding: 90px 0;  
    background: #f5f5f3;  
}  
  
.mt-wrapper .mt-process-heading {  
    text-align: center;  
    margin-bottom: 55px;  
}  
  
.mt-wrapper .mt-process-heading h2 {  
    font-size: 35px;  
    font-weight: 500;  
}  
  
.mt-wrapper .mt-process-grid {  
    display: grid;  
    grid-template-columns: repeat(4, 1fr);  
    gap: 20px;  
}  
  
.mt-wrapper .mt-process-card {  
    padding: 30px;  
    background: white;  
    border: 1px solid #e5e5e5;  
    transition: .3s;  
}  
  
.mt-wrapper .mt-process-card:hover {  
    transform: translateY(-5px);  
    border-color: var(--gold);  
}  
  
.mt-wrapper .mt-process-number {  
    color: var(--gold);  
    font-size: 12px;  
    margin-bottom: 25px;  
}  
  
.mt-wrapper .mt-process-card h3 {  
    font-size: 16px;  
    margin-bottom: 12px;  
}  
  
.mt-wrapper .mt-process-card p {  
    color: #888;  
    font-size: 11px;  
    line-height: 1.7;  
}  

/* =========================================================  
   CTA  
========================================================= */  
  
.mt-wrapper .mt-cta {  
    padding: 90px 0;  
    background: #080808;  
    color: white;  
    text-align: center;  
}  
  
.mt-wrapper .mt-cta h2 {  
    font-size: 42px;  
    font-weight: 500;  
    letter-spacing: -2px;  
}  
  
.mt-wrapper .mt-cta p {  
    color: #888;  
    font-size: 13px;  
    margin: 15px auto 25px;  
    max-width: 500px;  
}  

/* =========================================================  
   FOOTER  
========================================================= */  
  
.mt-wrapper .mt-footer {  
    background: #050505;  
    color: white;  
    padding: 45px 0 20px;  
    border-top: 1px solid #151515;  
}  
  
.mt-wrapper .mt-footer-grid {  
    display: grid;  
    grid-template-columns: 2fr 1fr 1fr 1fr;  
    gap: 50px;  
    padding-bottom: 35px;  
}  
  
.mt-wrapper .mt-footer-brand p {  
    max-width: 280px;  
    color: #777;  
    font-size: 11px;  
    line-height: 1.7;  
    margin-top: 15px;  
}  
  
.mt-wrapper .mt-footer h4 {  
    font-size: 11px;  
    margin-bottom: 15px;  
}  
  
.mt-wrapper .mt-footer a {  
    display: block;  
    color: #777;  
    font-size: 10px;  
    margin-bottom: 9px;  
    transition: .3s;  
}  
  
.mt-wrapper .mt-footer a:hover {  
    color: var(--gold);  
}  
  
.mt-wrapper .mt-footer-bottom {  
    padding-top: 20px;  
    border-top: 1px solid #151515;  
    color: #555;  
    font-size: 9px;  
    display: flex;  
    justify-content: space-between;  
}  

/* =========================================================  
   ANIMATIONS  
========================================================= */  
  
@keyframes mtFadeUp {  
    from {  
        opacity: 0;  
        transform: translateY(20px);  
    }  
    to {  
        opacity: 1;  
        transform: translateY(0);  
    }  
}  

/* =========================================================  
   RESPONSIVE  
========================================================= */  
  
@media (max-width: 1000px) {  
    .mt-wrapper .mt-nav { gap: 18px; }  
    .mt-wrapper .mt-hero-content { width: 50%; }  
    .mt-wrapper .mt-hero-visual { width: 50%; transform: scale(.85); transform-origin: right center; }  
    .mt-wrapper .mt-services-grid { grid-template-columns: repeat(3, 1fr); row-gap: 25px; }  
    .mt-wrapper .mt-service-card:nth-child(3) { border-right: none; }  
    .mt-wrapper .mt-projects-grid { grid-template-columns: repeat(2, 1fr); }  
}  
  
@media (max-width: 768px) {  
    .mt-wrapper .mt-container { width: min(100% - 30px, 600px); }  
    .mt-wrapper .mt-header { top: 8px; width: calc(100% - 20px); }  
    .mt-wrapper .mt-nav, .mt-wrapper .mt-header-button { display: none; }  
    .mt-wrapper .mt-mobile-menu { display: flex; align-items: center; justify-content: center; }  
    .mt-wrapper .mt-hero { min-height: 700px; }  
    .mt-wrapper .mt-hero-inner { min-height: 700px; padding-top: 100px; display: flex; flex-direction: column; align-items: flex-start; }  
    .mt-wrapper .mt-hero-content { width: 100%; }  
    .mt-wrapper .mt-hero h1 { font-size: 43px; }  
    .mt-wrapper .mt-hero-description { font-size: 11px; }  
    .mt-wrapper .mt-hero-visual { width: 100%; height: 290px; transform: scale(.72); transform-origin: center top; margin-top: 10px; }  
    .mt-wrapper .mt-services { padding-top: 45px; }  
    .mt-wrapper .mt-services-grid { grid-template-columns: 1fr 1fr; gap: 25px 0; }  
    .mt-wrapper .mt-service-card { padding: 0 15px; }  
    .mt-wrapper .mt-service-card:nth-child(2), .mt-wrapper .mt-service-card:nth-child(4) { border-right: none; }  
    .mt-wrapper .mt-service-card:nth-child(3) { border-right: 1px solid #e5e5e5; }  
    .mt-wrapper .mt-projects-grid { grid-template-columns: 1fr 1fr; }  
    .mt-wrapper .mt-about-grid { grid-template-columns: 1fr; gap: 40px; }  
    .mt-wrapper .mt-about h2 { font-size: 34px; }  
    .mt-wrapper .mt-process-grid { grid-template-columns: 1fr 1fr; }  
    .mt-wrapper .mt-footer-grid { grid-template-columns: 1fr 1fr; }  
}  
  
@media (max-width: 500px) {  
    .mt-wrapper .mt-logo-title { font-size: 10px; }  
    .mt-wrapper .mt-hero h1 { font-size: 38px; letter-spacing: -2px; }  
    .mt-wrapper .mt-hero-buttons { flex-direction: column; align-items: flex-start; }  
    .mt-wrapper .mt-btn { width: 160px; }  
    .mt-wrapper .mt-hero-visual { transform: scale(.58); margin-left: -25px; }  
    .mt-wrapper .mt-services-grid { grid-template-columns: 1fr; }  
    .mt-wrapper .mt-service-card, .mt-wrapper .mt-service-card:nth-child(3) { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 20px; }  
    .mt-wrapper .mt-projects-grid { grid-template-columns: 1fr; }  
    .mt-wrapper .mt-project-card { height: 190px; }  
    .mt-wrapper .mt-process-grid { grid-template-columns: 1fr; }  
    .mt-wrapper .mt-footer-grid { grid-template-columns: 1fr; }  
    .mt-wrapper .mt-footer-bottom { flex-direction: column; gap: 10px; }  
}  
  
/* =========================================================  
   MOBILE MENU ACTIVE  
========================================================= */  
  
@media (max-width: 768px) {  
    .mt-wrapper .mt-header.mobile-open { height: auto; }  
    .mt-wrapper .mt-header.mobile-open .mt-nav { display: flex; position: absolute; top: 58px; left: 0; right: 0; padding: 20px; flex-direction: column; align-items: flex-start; gap: 20px; background: rgba(8,8,8,.96); border: 1px solid rgba(255,255,255,.1); }  
    .mt-wrapper .mt-header.mobile-open .mt-nav a { font-size: 12px; }  
}