/* ================================================================
   MiFAYOL THEME v2 — INFRASTRUCTURE CONSTRUCTION
   Colors: Black (#0d0d0d) | Red (#C8102E) | White (#fff)
   Philosophy: Steel-strong. One line per feature. Killer.
   ================================================================ */

:root {
    --mf-black: #1a1c1e;
    --mf-dark: #222426;
    --mf-red: #C8102E;
    --mf-red-dark: #9B0A1E;
    --mf-white: #ffffff;
    --mf-offwhite: #F5F4F0;
    --mf-grey: #888;
    --mf-grey-light: #e5e5e5;
    --mf-font-heading: 'Oswald', 'Arial Narrow', sans-serif;
    --mf-font-body: 'Montserrat', system-ui, sans-serif;
    --mf-font-mono: 'Space Grotesk', monospace;
    --mf-radius: 0px;
    --mf-tr: .3s ease;
    --mf-tr-fast: .18s ease;
}

/* Apple-level typography: antialiasing & rendering + okunabilirlik */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Global font: tek tip Oswald başlık, Montserrat body — kalın, okunaklı */
h1,h2,h3,h4,h5,h6 { font-family: var(--mf-font-heading); font-weight: 600; color: var(--mf-black); }
p,li,span,a { font-family: var(--mf-font-body); }
/* Açık arka planlı sayfalarda koyu yazı */
.sd-wrap,.mf-section--light,.mf-section--grey,.ks--lt { color: var(--mf-black); }
.sd-wrap h1,.sd-wrap h2,.sd-wrap h3,.mf-section--light h1,.mf-section--light h2,.mf-section--grey h1,.mf-section--grey h2,.ks--lt h1,.ks--lt h2 { color: var(--mf-black); }
.sd-wrap p,.sd-wrap li,.mf-section--light p,.mf-section--grey p,.ks--lt p { color: #444; }

/* Navbar: protect from slider grayscale but allow logo filter */
#main-navbar { filter: none!important; }
.mf-navbar { filter: none!important; }
/* Desktop: orijinal logo — sadece ışık, efekt yok */
.navbar-logo img { filter: drop-shadow(0 0 12px rgba(255,255,255,.6))!important; }

/* ================================================================
   0. LOADING SCREEN — cinematic fade with glow & pulse
   ================================================================ */
#mf-loading {
    position: fixed; inset: 0; z-index: 99999;
    background: var(--mf-black);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    transition: opacity .4s ease, visibility .4s ease;
}
#mf-loading.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
#mf-loading .mf-load-logo { width: 180px; max-width: 45vw; position: relative; overflow: hidden; animation: mfLogoPulse 1.6s ease-in-out infinite; }
#mf-loading .mf-load-logo img { width: 100%; filter: none; position: relative; z-index: 2; }
#mf-loading .mf-load-beam {
    position: absolute; top: -20%; left: -100%; width: 50%; height: 140%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 49%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.12) 51%, transparent 60%);
    z-index: 3; animation: mfBeam 1.8s ease-in-out infinite; pointer-events: none;
}
#mf-loading .mf-load-bar { width: 120px; height: 3px; background: rgba(255,255,255,0.08); margin-top: 24px; overflow: hidden; border-radius: 2px; position: relative; }
#mf-loading .mf-load-bar-inner {
    width: 0%; height: 100%; background: var(--mf-red); transition: width .1s linear;
    box-shadow: 0 0 8px rgba(200,16,46,0.6), 0 0 20px rgba(200,16,46,0.3);
    position: relative;
}
#mf-loading .mf-load-bar-inner::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: mfShimmer 1s ease-in-out infinite;
}
#mf-loading .mf-load-label {
    font-family: var(--mf-font-heading); font-size: 10px; letter-spacing: .25em;
    text-transform: uppercase; color: rgba(255,255,255,0.25); margin-top: 14px;
}
@keyframes mfBeam { 0%{left:-100%} 100%{left:200%} }
@keyframes mfLogoPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes mfShimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }

/* ================================================================
   1. GLOBAL
   ================================================================ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ================================================================
   2. REUSABLE COMPONENTS — one class, done
   ================================================================ */
.mf-glow { position: relative; }
.mf-glow::before { content:''; position:absolute; inset:0; border:1px solid transparent; transition:border-color var(--mf-tr); pointer-events:none; z-index:1; }
.mf-glow:hover::before { border-color: var(--mf-red); }

.mf-accent { position: relative; padding-left: 14px; }
.mf-accent::before { content:''; position:absolute; left:0; top:0; width:3px; height:0; background:var(--mf-red); transition:height var(--mf-tr); }
.mf-accent:hover::before { height: 100%; }

.mf-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; font-family: var(--mf-font-heading);
    font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; border: 2px solid var(--mf-red);
    background: var(--mf-red); color: var(--mf-white); cursor: pointer;
    transition: background var(--mf-tr), color var(--mf-tr), border-color var(--mf-tr);
}
.mf-btn:hover { background: var(--mf-black); border-color: var(--mf-black); color: var(--mf-white); }
.mf-btn--outline { background: transparent; color: var(--mf-red); }
.mf-btn--outline:hover { background: var(--mf-red); color: var(--mf-white); }
.mf-btn--black { background: var(--mf-black); border-color: var(--mf-black); }
.mf-btn--black:hover { background: var(--mf-red); border-color: var(--mf-red); }

/* ================================================================
   3. NAVBAR — MiFAYOL override (red replaces gold)
   ================================================================ */
/* Hamburger: 3 kırmızı çizgi (logo rengi) */
#hb-btn { border-color: rgba(200,16,46,0.35)!important; background: transparent!important; transition: border-color .25s, background .25s!important; }
#hb-btn .hb-line { background: #C8102E!important; }
#hb-btn:hover { border-color: var(--mf-red)!important; background: rgba(200,16,46,0.08)!important; box-shadow: none!important; }
#hb-btn:hover .hb-line { background: var(--mf-red)!important; }
body[data-navbar="light"] #hb-btn { border-color: rgba(200,16,46,0.3)!important; }
body[data-navbar="light"] #hb-btn .hb-line { background: #C8102E!important; }
body[data-navbar="light"] #hb-btn:hover { border-color: var(--mf-red)!important; background: rgba(200,16,46,0.04)!important; }
body[data-navbar="light"] #hb-btn:hover .hb-line { background: var(--mf-red)!important; }
/* Navbar: her zaman şeffaf — override yok */
#hb-btn { outline: 2px solid rgba(200,16,46,0.25)!important; outline-offset: 3px!important; }
#hb-btn:hover { outline-color: var(--mf-red)!important; outline-offset: 4px!important; }

/* ================================================================
   4. LANGUAGE DROPDOWN — MiFAYOL theme override
   ================================================================ */
.nw-lang-toggle { background: rgba(255,255,255,.1)!important; border-color: rgba(255,255,255,.2)!important; }
.nw-lang-toggle:hover { background: rgba(255,255,255,.18)!important; }
.nw-lang-list { background: rgba(13,13,13,.96)!important; border-color: rgba(200,16,46,.3)!important; }
/* Hide old lang switcher if still in DOM */
.nw-lang-sw { display: none!important; }

/* ================================================================
   5. HAMBURGER PANEL — MiFAYOL dark theme, NO trembling
   ================================================================ */
#hb-panel {
    background: var(--mf-black)!important;
    border-left: 2px solid var(--mf-red);
    border-right: none;
    will-change: clip-path;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
#hb-panel::before { background: linear-gradient(180deg, var(--mf-red) 0%, transparent 50%)!important; left: 0!important; right: auto!important; }
.hbp-header { border-bottom: 1px solid rgba(200,16,46,0.15); padding-bottom: 12px!important; }
.hbp-brand img { filter: brightness(0) invert(1); }
#hb-close { border-color: rgba(255,255,255,0.15)!important; color: var(--mf-white)!important; }
#hb-close:hover { background: var(--mf-red)!important; border-color: var(--mf-red)!important; color: var(--mf-white)!important; }
.hbp-rule { background: linear-gradient(90deg, var(--mf-red) 0%, rgba(200,16,46,0.05) 80%, transparent)!important; }
.hbp-label { color: var(--mf-white)!important; font-family: var(--mf-font-heading)!important; font-size: 14px!important; font-weight: 400!important; letter-spacing: .08em!important; }
.hbp-item { border-bottom: 1px solid rgba(255,255,255,0.04)!important; will-change: opacity, transform; }
.hbp-item:hover { background: rgba(200,16,46,0.06)!important; }
.hbp-item::after { background: var(--mf-red)!important; }
.hbp-arrow { color: var(--mf-red)!important; }
.hbp-footer { border-top: 1px solid rgba(200,16,46,0.15)!important; }
.hbp-cta { background: var(--mf-red)!important; color: var(--mf-white)!important; font-family: var(--mf-font-heading)!important; letter-spacing: .12em!important; border: none!important; }
.hbp-cta:hover { background: var(--mf-white)!important; color: var(--mf-red)!important; }
.hbp-copy { color: rgba(255,255,255,0.25)!important; }
#hb-backdrop { background: rgba(0,0,0,0.4)!important; backdrop-filter: blur(3px)!important; }

/* ================================================================
   6. SUB-PANELS
   ================================================================ */
.hb-sub { background: #111!important; border-left: 2px solid var(--mf-red)!important; border-right: none!important; box-shadow: -4px 0 20px rgba(0,0,0,0.3)!important; will-change: clip-path; }
.hbs-title { color: var(--mf-red)!important; font-family: var(--mf-font-heading)!important; letter-spacing: .15em!important; }
.hbs-back { border-color: rgba(255,255,255,0.15)!important; color: var(--mf-white)!important; }
.hbs-back:hover { background: var(--mf-red)!important; border-color: var(--mf-red)!important; }
.hbs-rule { background: linear-gradient(90deg, var(--mf-red) 0%, rgba(200,16,46,0.05) 70%, transparent)!important; }
.hbs-item { color: var(--mf-white)!important; border-bottom: 1px solid rgba(255,255,255,0.04)!important; }
.hbs-item:hover { background: rgba(200,16,46,0.06)!important; }
.hbs-item::after { background: var(--mf-red)!important; }
.hbs-num { color: var(--mf-red)!important; }
.hbs-item strong { color: var(--mf-white)!important; font-family: var(--mf-font-heading)!important; }
.hbs-item em { color: rgba(255,255,255,0.35)!important; }

@media (max-width: 768px) {
    #hb-panel {
        clip-path: none!important;
        right: 0!important; left: auto!important;
        transform: translateX(100%)!important;
        transition: transform .4s cubic-bezier(.76,0,.24,1)!important;
        overflow-y: auto!important;
        width: min(280px, 82vw)!important;
    }
    body.hb-open #hb-panel {
        transform: translateX(0)!important;
        clip-path: none!important;
    }
}

/* ================================================================
   7. MOBILE ACCORDION — no trembling, hardware accelerated
   ================================================================ */
@media (max-width: 768px) {
    .hb-sub {
        position: static!important; width: 100%!important; height: auto!important;
        max-height: 0; clip-path: none!important; border-left: none!important;
        border-top: 1px solid rgba(200,16,46,0.1);
        box-shadow: none!important; overflow: hidden!important;
        transition: max-height .35s ease!important; opacity: 1!important; z-index: auto!important;
        will-change: max-height;
    }
    .hb-sub.is-open { max-height: 500px; }
    .hbs-header, .hbs-rule { display: none!important; }
    .hbs-nav { padding: 0!important; }
    .hbs-item { padding: 10px 18px 10px 32px!important; background: rgba(200,16,46,0.02); }
    .hbs-item strong { font-size: 12px!important; }
    .hbs-item em { font-size: 9px!important; }
    #hb-panel { overflow-y: auto!important; }
    .hbp-has-sub .hbp-arrow { transition: transform .25s ease; }
    .hbp-has-sub.is-expanded .hbp-arrow { transform: rotate(90deg); }
}

/* ================================================================
   8. SECTION STYLES
   ================================================================ */
.mf-section { padding: 80px 0; position: relative; }
.mf-section--dark { background: var(--mf-black); color: var(--mf-white); }
.mf-section--light { background: var(--mf-white); color: var(--mf-black); }
.mf-section--grey { background: var(--mf-offwhite); color: var(--mf-black); }

/* Section dividers — red gradient line between sections */
.mf-section + .mf-section::before {
    content: ''; display: block; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 80%; max-width: 900px; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--mf-red) 30%, var(--mf-red) 70%, transparent 100%);
    opacity: 0.4;
}

/* Contrast fixes — dark sections */
.mf-section--dark, .mf-section--dark p, .mf-section--dark li, .mf-section--dark span:not(.mf-gi-tag) { color: var(--mf-white); }
.mf-section--dark h1, .mf-section--dark h2, .mf-section--dark h3, .mf-section--dark h4 { color: var(--mf-white); }
.mf-section--dark .mf-section-subtitle { color: rgba(255,255,255,0.5); }
.mf-section--dark a:not(.mf-btn):not(.mf-mail-cta) { color: rgba(255,255,255,0.8); }

/* Contrast fixes — light sections */
.mf-section--light, .mf-section--light p, .mf-section--light li { color: var(--mf-black); }
.mf-section--light h1, .mf-section--light h2, .mf-section--light h3, .mf-section--light h4 { color: var(--mf-black); }
.mf-section--light .mf-section-subtitle { color: var(--mf-grey); }

/* Grey section contrast */
.mf-section--grey p, .mf-section--grey li, .mf-section--grey span { color: var(--mf-dark); }
.mf-section--grey h1, .mf-section--grey h2, .mf-section--grey h3, .mf-section--grey h4 { color: var(--mf-black); }
.mf-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mf-section-title { font-family: var(--mf-font-heading); font-size: clamp(28px,5vw,42px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; line-height: 1.1; }
.mf-section-title span { color: var(--mf-red); }
.mf-section-subtitle { font-family: var(--mf-font-body); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--mf-grey); margin-bottom: 40px; }
.mf-section-line { width: 50px; height: 3px; background: var(--mf-red); margin-bottom: 20px; }

/* ================================================================
   9. HIZMETLER — screenshot card layout
   ================================================================ */
.mf-hizmet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    min-height: auto;
}
.mf-hizmet-card {
    position: relative; overflow: hidden; border-radius: 0;
    cursor: pointer; transition: all .3s ease;
    min-height: 90px; max-height: 120px;
}
.mf-hizmet-card:hover { z-index: 2; box-shadow: 0 4px 20px rgba(200,16,46,.2); }
.mf-hizmet-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease; display: block;
}
.mf-hizmet-card:hover img { transform: scale(1.03); }
.mf-hizmet-card .mf-hc-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px; transition: background .3s ease;
}
.mf-hizmet-card:hover .mf-hc-overlay { background: linear-gradient(0deg, rgba(200,16,46,0.6) 0%, rgba(0,0,0,0.15) 50%, transparent 100%); }
.mf-hizmet-card .mf-hc-title {
    font-family: var(--mf-font-heading); font-size: 10px; font-weight: 500;
    color: #fff; text-transform: uppercase; letter-spacing: .03em; line-height: 1.2;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.mf-hizmet-card .mf-hc-desc {
    font-family: var(--mf-font-body); font-size: 13px; color: rgba(255,255,255,0.85);
    line-height: 1.65; margin-top: 8px; max-height: 0; overflow: hidden;
    transition: max-height .3s ease, opacity .3s ease; opacity: 0;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.mf-hizmet-card:hover .mf-hc-desc { max-height: 80px; opacity: 1; }
.mf-hizmet-card .mf-hc-arrow {
    position: absolute; bottom: 20px; right: 20px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center;
    transition: background .25s ease;
}
.mf-hizmet-card:hover .mf-hc-arrow { background: var(--mf-red); }

/* Side cards — all cards same style in 3x3 grid */
.mf-hizmet-card--side .mf-hc-title { writing-mode: horizontal-tb; transform: none; font-size: 15px; }
.mf-hizmet-card--side .mf-hc-overlay { padding: 16px; justify-content: flex-end; align-items: flex-start; }

/* Scroll-down arrow indicator */
.mf-scroll-arrow {
    display: flex; align-items: center; justify-content: center;
    margin-top: 24px; cursor: pointer;
}
.mf-scroll-arrow-btn {
    width: 44px; height: 44px; border: 1px solid rgba(200,16,46,.25);
    background: transparent; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--mf-red); transition: all .3s;
    animation: mfBounce 2s ease-in-out infinite;
}
.mf-scroll-arrow-btn:hover { background: var(--mf-red); color: #fff; border-color: var(--mf-red); }
@keyframes mfBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

@media (max-width: 768px) {
    .mf-hizmet-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .mf-hizmet-card { min-height: 80px; max-height: 110px; }
    .mf-hizmet-card .mf-hc-title { font-size: 9px; }
}
@media (max-width: 480px) {
    .mf-hizmet-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; }
    .mf-hizmet-card { min-height: 70px; max-height: 95px; }
    .mf-hizmet-card .mf-hc-title { font-size: 8px; }
}

/* ================================================================
   10. SERVICE DETAIL — inline expand
   ================================================================ */
.mf-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0; border: 1px solid var(--mf-grey-light); }
.mf-service-card { padding: 28px 24px; border: 1px solid var(--mf-grey-light); margin: -1px; cursor: pointer; transition: background var(--mf-tr); }
.mf-service-card:hover { background: rgba(200,16,46,0.02); }
.mf-service-card.is-active { background: var(--mf-offwhite); border-color: var(--mf-red); }
.mf-service-card .mf-sc-num { font-family: var(--mf-font-heading); font-size: 32px; font-weight: 700; color: rgba(200,16,46,0.1); line-height: 1; margin-bottom: 10px; }
.mf-service-card .mf-sc-title { font-family: var(--mf-font-heading); font-size: 16px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--mf-black); margin-bottom: 6px; }
.mf-service-card .mf-sc-desc { font-family: var(--mf-font-body); font-size: 12px; color: var(--mf-grey); line-height: 1.5; }
.mf-service-card .mf-sc-icon { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border: 1px solid var(--mf-grey-light); display: flex; align-items: center; justify-content: center; transition: all var(--mf-tr); }
.mf-service-card:hover .mf-sc-icon, .mf-service-card.is-active .mf-sc-icon { background: var(--mf-red); border-color: var(--mf-red); color: var(--mf-white); }
.mf-service-detail { display: none; grid-column: 1 / -1; background: var(--mf-white); border: 2px solid var(--mf-red); border-top: 3px solid var(--mf-red); padding: 36px; position: relative; animation: mfSlide .3s ease; }
.mf-service-detail.is-active { display: block; }
@keyframes mfSlide { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.mf-sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.mf-sd-content h3 { font-family: var(--mf-font-heading); font-size: 22px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 14px; color: var(--mf-black); }
.mf-sd-content h3 span { color: var(--mf-red); }
.mf-sd-content ul { list-style: none; padding: 0; margin: 0 0 20px; }
.mf-sd-content ul li { padding: 6px 0 6px 14px; border-bottom: 1px solid var(--mf-grey-light); font-family: var(--mf-font-body); font-size: 12px; color: var(--mf-dark); position: relative; }
.mf-sd-content ul li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:2px; background:var(--mf-red); }
.mf-sd-images { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mf-sd-images img { width: 100%; height: 130px; object-fit: cover; border: 1px solid var(--mf-grey-light); transition: border-color var(--mf-tr); }
.mf-sd-images img:hover { border-color: var(--mf-red); }
.mf-sd-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.mf-sd-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 1px solid var(--mf-grey-light); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--mf-tr-fast); }
.mf-sd-close:hover { background: var(--mf-red); border-color: var(--mf-red); color: var(--mf-white); }

/* ================================================================
   11. GALLERY
   ================================================================ */
.mf-gallery-filters { display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap; }
.mf-gallery-filter { padding: 7px 18px; font-family: var(--mf-font-heading); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--mf-grey-light); background: transparent; color: var(--mf-dark); cursor: pointer; transition: all var(--mf-tr-fast); }
.mf-gallery-filter:hover, .mf-gallery-filter.is-active { background: var(--mf-red); border-color: var(--mf-red); color: var(--mf-white); }
.mf-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; }
.mf-gallery-item { position: relative; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.mf-gallery-item img, .mf-gallery-item video { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mf-gallery-item:hover img, .mf-gallery-item:hover video { transform: scale(1.04); }
.mf-gallery-item .mf-gi-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,13,13,0.75) 0%, transparent 50%); opacity: 0; transition: opacity .25s ease; display: flex; align-items: flex-end; padding: 14px; }
.mf-gallery-item:hover .mf-gi-overlay { opacity: 1; }
.mf-gi-overlay span { font-family: var(--mf-font-heading); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mf-white); }
.mf-gi-tag { position: absolute; top: 6px; left: 6px; padding: 2px 8px; font-family: var(--mf-font-body); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; background: var(--mf-red); color: var(--mf-white); }

/* ================================================================
   12. MAIL CTA
   ================================================================ */
.mf-mail-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mf-font-body); font-size: 11px; letter-spacing: .06em; color: var(--mf-red); text-decoration: none; transition: color var(--mf-tr-fast); }
.mf-mail-cta:hover { color: var(--mf-black); }

/* ================================================================
   13. FOOTER THEME
   ================================================================ */
.main-footer { border-top: 3px solid var(--mf-red)!important; }
.footer-bottom { border-top: 1px solid rgba(200,16,46,0.15)!important; }
/* sticky-nav removed */

/* ================================================================
   14. LOGO BEAM — subtle, on navbar logo
   ================================================================ */
.navbar-logo { position: relative; overflow: hidden; }

/* ================================================================
   15. SCROLL REVEAL
   ================================================================ */
.mf-reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.mf-reveal.is-visible { opacity: 1; transform: none; }

/* ================================================================
   16. RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    .mf-sd-grid { grid-template-columns: 1fr; }
    .mf-services-grid { grid-template-columns: 1fr; }
    .mf-section { padding: 48px 0; }
    .mf-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .mf-sd-actions { flex-direction: column; }
    .mf-sd-actions .mf-btn { width: 100%; justify-content: center; }
}