/* ==================================================
   01. VARIABLES
================================================== */

:root{
    --red:#c70d18;
    --red-hover:#e21724;
    --dark:#050b10;
    --dark2:#09131b;
    --dark3:#07111a;
    --text:#151515;
    --muted:#666;
    --line:#e8e8e8;
    --light:#f7f7f7;
    --white:#fff;
}

/* ==================================================
   02. RESET
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Manrope',sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

button,
input,
textarea{
    font-family:inherit;
}

/* ==================================================
   03. GLOBAL LAYOUT
================================================== */

.mido-container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}

.reveal{
    opacity:0;
    transform:translateY(22px);
    transition:.65s ease;
}

.reveal.show{
    opacity:1;
    transform:none;
}

/* ==================================================
   04. BUTTONS
================================================== */

.mido-btn{
    height:54px;
    padding:0 30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-size:14px;
    font-weight:900;
    text-transform:uppercase;
    transition:.25s ease;
    border-radius:999px;
}

.mido-btn.red{
    background:var(--red);
    color:#fff;
}

.mido-btn.red:hover{
    background:var(--red-hover);
    transform:translateY(-2px);
}

.mido-btn.dark{
    color:#fff;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.04);
}

.mido-btn.dark:hover{
    background:#fff;
    color:#000;
}

.mido-outline-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-top:28px;
    border:1px solid #111;
    padding:13px 24px;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    transition:.25s;
    border-radius:999px;
}

.mido-outline-btn:hover{
    background:#111;
    color:#fff;
}

/* ==================================================
   05. SECTION TITLES
================================================== */

.mido-section-title{
    margin-bottom:35px;
}

.mido-section-title.center{
    text-align:center;
}

.mido-section-title span{
    display:block;
    color:var(--red);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.18em;
}

.mido-section-title h2{
    position:relative;
    color:var(--text);
    font-size:clamp(32px,3vw,48px);
    line-height:1.1;
    letter-spacing:-.04em;
    font-weight:900;
}

.mido-section-title h2::after{
    content:"";
    display:block;
    width:60px;
    height:3px;
    background:var(--red);
    margin:16px auto 0;
}

.mido-section-title:not(.center) h2::after{
    margin-left:0;
}

/* ==================================================
   06. HEADER
================================================== */

.mido-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    transition:.35s ease;
}

.mido-header.scrolled{
    background:rgba(5,11,16,.94);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 35px rgba(0,0,0,.25);
}

.mido-header-inner{
    height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.mido-logo img{
    width:176px;
    height:auto;
}

.mido-nav{
    display:flex;
    align-items:center;
    gap:34px;
}

.mido-nav a{
    position:relative;
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
}

.mido-nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-15px;
    width:0;
    height:3px;
    background:var(--red);
    transition:.25s ease;
}

.mido-nav a:hover::after{
    width:100%;
}

.mido-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.mido-lang{
    color:#fff;
    border:1px solid rgba(255,255,255,.32);
    padding:11px 14px;
    font-size:13px;
    font-weight:800;
}

.mido-header-cta{
    background:var(--red);
    color:#fff;
    padding:13px 22px;
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
    transition:.25s ease;
}

.mido-header-cta:hover{
    background:var(--red-hover);
}

.mido-menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:0;
    background:var(--red);
    color:#fff;
    font-size:20px;
    cursor:pointer;
}

/* ==================================================
   07. HERO
================================================== */

.mido-hero{
    position:relative;
    min-height:560px;
    height:58vw;
    max-height:760px;
    overflow:hidden;
    display:flex;
    align-items:center;
    background:#000;
}

.mido-hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.mido-hero-shade{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.84) 0%,
        rgba(0,0,0,.62) 42%,
        rgba(0,0,0,.12) 100%
    );
}

.mido-hero-content{
    position:relative;
    z-index:2;
    max-width:620px;
    color:#fff;
    padding-top:70px;
}

.mido-hero-content span{
    color:var(--red);
    font-size:14px;
    font-weight:900;
    letter-spacing:.22em;
}

.mido-hero h1{
    margin-top:18px;
    font-size:clamp(46px,6vw,78px);
    line-height:1.02;
    letter-spacing:-.045em;
    text-transform:uppercase;
    font-weight:500;
}

.mido-hero h1 strong{
    display:block;
    font-weight:900;
}

.mido-hero p{
    margin-top:22px;
    max-width:540px;
    color:#eee;
    font-size:17px;
    line-height:1.75;
}

.mido-hero-buttons{
    margin-top:34px;
    display:flex;
    gap:18px;
}

/* ==================================================
   08. REFERANS ŞERİDİ
================================================== */

.mido-logo-strip{
    padding:26px 0;
    background:#fff;
    border-bottom:1px solid var(--line);
}

.mido-logo-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    gap:42px;
}

.mido-logo-grid img{
    max-height:46px;
    margin:auto;
    filter:grayscale(100%);
    opacity:.58;
    transition:.25s;
}

.mido-logo-grid img:hover{
    filter:none;
    opacity:1;
}

/* ==================================================
   09. İSTATİSTİKLER
================================================== */

.mido-stats{
    background:#f8f8f8;
    color:var(--text);
    padding:42px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.mido-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.mido-stats-grid div{
    text-align:center;
    border-right:1px solid #e6e6e6;
}

.mido-stats-grid div:last-child{
    border-right:0;
}

.mido-stats i{
    color:var(--red);
    font-size:40px;
    margin-bottom:16px;
}

.mido-stats strong{
    display:block;
    font-size:36px;
    line-height:1;
    font-weight:900;
    color:var(--text);
}

.mido-stats span{
    display:block;
    margin-top:9px;
    color:#777;
    font-size:13px;
    text-transform:uppercase;
    font-weight:800;
}

/* ==================================================
   10. ÜRÜNLER
================================================== */

.mido-products{
    padding:60px 0 80px;
    background:#fff;
}

.mido-product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.mido-product-card{
    min-height:190px;
    border:1px solid #ddd;
    border-radius:12px;
    background:#fff;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    overflow:hidden;
    transition:.3s ease;
}

.mido-product-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
    border-color:#ccc;
}

.mido-product-card div{
    width:45%;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.mido-product-card i{
    color:var(--red);
    font-size:22px;
}

.mido-product-card h3{
    margin-top:18px;
    font-size:14px;
    line-height:1.3;
    text-transform:uppercase;
    font-weight:900;
}

.mido-product-card span{
    margin-top:auto;
    color:var(--red);
}

.mido-product-card img{
    width:55%;
    height:180px;
    object-fit:contain;
    align-self:end;
    padding:10px;
    transition:.3s ease;
}

.mido-product-card:hover img{
    transform:scale(1.05);
}

/* ==================================================
   11. HAKKIMIZDA
================================================== */

.mido-about{
    padding:20px 0 80px;
    background:#fff;
}

.mido-about-grid{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:60px;
    align-items:center;
}

.mido-about-text > span{
    color:var(--red);
    font-size:13px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.16em;
}

.mido-about-text h2{
    margin-top:12px;
    font-size:42px;
    line-height:1.05;
    letter-spacing:-.045em;
    font-weight:900;
}

.mido-about-text p{
    margin-top:20px;
    color:#555;
    line-height:1.8;
    font-size:15px;
}

.mido-about-image img{
    width:100%;
    border-radius:14px;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

/* ==================================================
   12. HİZMETLER
================================================== */

.mido-services{
    padding:60px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.mido-service-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.mido-service-grid > div{
    display:grid;
    grid-template-columns:72px 1fr;
    gap:22px;
    align-items:center;
    border-right:1px solid var(--line);
    padding-right:24px;
}

.mido-service-grid > div:last-child{
    border-right:0;
}

.mido-service-grid i{
    color:var(--red);
    font-size:48px;
    grid-row:1/3;
}

.mido-service-grid h3{
    font-size:15px;
    text-transform:uppercase;
    font-weight:900;
}

.mido-service-grid p{
    color:#666;
    font-size:14px;
    line-height:1.6;
}

/* ==================================================
   13. SÜREÇ
================================================== */

.mido-process{
    position:relative;
    padding:60px 0 80px;
    background:#f8f8f8;
    color:var(--text);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.dark-title h2{
    color:var(--text) !important;
}

.mido-process-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:36px;
    margin-top:38px;
}

.mido-process-grid::before{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    top:31px;
    height:2px;
    background:var(--red);
}

.mido-process-grid > div{
    position:relative;
    z-index:2;
}

.mido-process-grid i{
    width:66px;
    height:66px;
    border-radius:50%;
    border:2px solid #ddd;
    background:#fff;
    color:var(--red);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
}

.mido-process-grid strong{
    display:block;
    margin-top:18px;
    color:var(--red);
    font-size:32px;
    font-weight:900;
}

.mido-process-grid h3{
    margin-top:4px;
    text-transform:uppercase;
    font-size:14px;
    font-weight:900;
}

.mido-process-grid p{
    margin-top:10px;
    color:#666;
    font-size:13px;
    line-height:1.6;
}

/* ==================================================
   14. REFERANSLAR
================================================== */

.mido-references{
    padding:70px 0;
    background:#fff;
}

.mido-ref-grid{
    display:grid;
    grid-template-columns:.95fr 1.4fr;
    gap:70px;
    align-items:center;
}

.mido-ref-logos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    align-items:center;
}

.mido-ref-logos img{
    max-height:44px;
    width:auto;
    filter:grayscale(100%);
    opacity:.7;
    transition:.25s ease;
}

.mido-ref-logos img:hover{
    opacity:1;
    filter:none;
}

.mido-quote{
    background:#fafafa;
    padding:48px 58px;
    box-shadow:0 20px 50px rgba(0,0,0,.06);
}

.mido-quote i{
    color:var(--red);
    font-size:48px;
    margin-bottom:18px;
}

.mido-quote p{
    font-size:19px;
    line-height:1.7;
    font-weight:700;
}

.mido-quote strong{
    display:block;
    margin-top:28px;
    font-size:14px;
}

.mido-quote span{
    display:block;
    margin-top:4px;
    color:#777;
    font-size:13px;
}

/* ==================================================
   15. CTA
================================================== */

.mido-big-cta{
    position:relative;
    overflow:hidden;
    background:var(--red);
    color:#fff;
}

.mido-big-cta > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.24;
}

.mido-big-cta-inner{
    position:relative;
    z-index:2;
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.mido-big-cta span{
    display:block;
    font-size:14px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.15em;
}

.mido-big-cta h2{
    margin-top:6px;
    font-size:42px;
    line-height:1;
    text-transform:uppercase;
    font-weight:900;
}

.cta-white{
    border:1px solid rgba(255,255,255,.75);
    color:#fff;
    border-radius:999px;
}

.cta-white:hover{
    background:#fff;
    color:var(--red);
}

/* ==================================================
   16. İLETİŞİM
================================================== */

.mido-contact{
    padding:60px 0;
    background:#fff;
}

.mido-contact-grid{
    display:grid;
    grid-template-columns:.85fr 1.2fr 1.2fr;
    gap:34px;
    align-items:start;
}

.mido-contact-info p{
    display:flex;
    gap:15px;
    margin-bottom:18px;
    font-size:15px;
    line-height:1.6;
}

.mido-contact-info i{
    width:18px;
    color:#111;
    margin-top:4px;
}

.mido-contact-info small{
    color:#777;
}

.mido-socials{
    display:flex;
    gap:11px;
    margin-top:24px;
}

.mido-socials a{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#111;
    color:#fff;
    transition:.25s ease;
}

.mido-socials a i{
    color:#fff !important;
    font-size:16px;
    line-height:1;
}

.mido-socials a:hover{
    background:var(--red);
}

.mido-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.mido-form input,
.mido-form textarea{
    width:100%;
    border:1px solid #d8d8d8;
    padding:14px 15px;
    font-family:inherit;
    font-size:14px;
    outline:none;
}

.mido-form textarea{
    grid-column:1/-1;
    min-height:120px;
    resize:vertical;
}

.mido-form input:focus,
.mido-form textarea:focus{
    border-color:var(--red);
}

.mido-form button{
    grid-column:1/-1;
    height:52px;
    border:0;
    background:#07111a;
    color:#fff;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
    transition:.25s ease;
    border-radius:999px;
}

.mido-form button:hover{
    background:var(--red);
}

.mido-map iframe{
    width:100%;
    height:280px;
    border:0;
    border-radius:10px;
}

/* ==================================================
   17. FOOTER
================================================== */

.mido-footer{
    background:#fafafa;
    color:#444;
    padding:42px 0 18px;
    border-top:1px solid var(--line);
}

.mido-footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr 1.2fr;
    gap:46px;
}

.mido-footer img{
    width:160px;
    margin-bottom:18px;
}

.mido-footer h4{
    color:#111;
    font-size:14px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.mido-footer p,
.mido-footer a{
    color:#666;
    font-size:14px;
    line-height:1.7;
}

.mido-footer a{
    display:block;
    margin-bottom:6px;
}

.mido-footer a:hover{
    color:var(--red);
}

.mido-copyright{
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid #e5e5e5;
    text-align:center;
    color:#777;
    font-size:13px;
}

/* ==================================================
   18. RESPONSIVE
================================================== */

@media(max-width:1024px){

    .mido-nav,
    .mido-actions{
        display:none;
    }

    .mido-menu-toggle{
        display:block;
    }

    .mido-nav.active{
        display:flex;
        position:absolute;
        left:0;
        right:0;
        top:86px;
        background:#07111a;
        padding:24px;
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .mido-product-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mido-about-grid,
    .mido-ref-grid,
    .mido-contact-grid{
        grid-template-columns:1fr;
    }

    .mido-process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mido-service-grid{
        grid-template-columns:1fr;
    }

    .mido-service-grid > div{
        border-right:0;
        border-bottom:1px solid var(--line);
        padding-bottom:24px;
    }

    .mido-service-grid > div:last-child{
        border-bottom:0;
    }
}

@media(max-width:768px){

    .mido-container{
        width:min(100% - 26px,1180px);
    }

    .mido-logo img{
        width:145px;
    }

    .mido-hero{
        min-height:640px;
        height:auto;
    }

    .mido-hero-content{
        padding-top:120px;
        padding-bottom:70px;
    }

    .mido-hero-buttons{
        flex-direction:column;
    }

    .mido-btn{
        width:100%;
    }

    .mido-logo-grid,
    .mido-stats-grid,
    .mido-product-grid,
    .mido-process-grid,
    .mido-footer-grid{
        grid-template-columns:1fr;
    }

    .mido-stats-grid div{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.15);
        padding:24px 0;
    }

    .mido-process-grid::before{
        display:none;
    }

    .mido-big-cta-inner{
        display:block;
        padding:30px 0;
    }

    .mido-big-cta h2{
        font-size:32px;
    }

    .cta-white{
        margin-top:20px;
    }

    .mido-form{
        grid-template-columns:1fr;
    }
}