@charset "UTF-8";
/* ==========================================================================
   34 MİMAR — MODERN REDESIGN LAYER
   --------------------------------------------------------------------------
   Bu dosya mevcut tema (style.css + responsive.css) üzerine EN SON yüklenir ve
   sitenin görsel dilini baştan aşağı yeniden tanımlar.
   Panel bağlantıları (PHP değişkenleri, linkler, form alanları) DEĞİŞMEZ;
   yalnızca görünüm katmanı yenilenir.
   Renk/aksan değiştirmek için sadece :root bloğundaki değişkenleri düzenleyin.
   ========================================================================== */

/* ==========================================================================
   00 — TASARIM TOKENLARI
   ========================================================================== */
:root{
    /* Marka */
    --mx-accent:        #e01b19;   /* logodaki kırmızı */
    --mx-accent-600:    #b81311;
    --mx-accent-soft:   rgba(224,27,25,.10);

    /* Nötrler — beton / kağıt paleti */
    --mx-ink:           #0d0e10;
    --mx-ink-2:         #16181c;
    --mx-ink-3:         #22252b;
    --mx-paper:         #ffffff;
    --mx-paper-2:       #f6f5f3;
    --mx-paper-3:       #ecebe8;
    --mx-text:          #14161a;
    --mx-muted:         #6d7078;
    --mx-muted-2:       #9aa0a8;
    --mx-line:          rgba(13,14,16,.10);
    --mx-line-dark:     rgba(255,255,255,.12);

    /* Tipografi */
    --mx-font-display:  "Archivo", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --mx-font-body:     "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    /* Ölçü */
    --mx-container:     1320px;
    --mx-gutter:        clamp(20px, 4vw, 56px);
    --mx-section:       clamp(72px, 9vw, 140px);
    --mx-radius:        2px;
    --mx-radius-lg:     4px;
    --mx-header-h:      92px;

    /* Görsel çerçevesi (paspartu) */
    --mx-frame:         10px;
    --mx-frame-line:    rgba(13,14,16,.13);

    /* Hareket */
    --mx-ease:          cubic-bezier(.22,.61,.36,1);
    --mx-ease-out:      cubic-bezier(.16,1,.3,1);

    /* Gölge */
    --mx-shadow-sm:     0 1px 2px rgba(13,14,16,.05), 0 8px 24px -16px rgba(13,14,16,.28);
    --mx-shadow:        0 2px 4px rgba(13,14,16,.04), 0 18px 48px -24px rgba(13,14,16,.32);
    --mx-shadow-lg:     0 30px 80px -40px rgba(13,14,16,.45);
}

/* ==========================================================================
   01 — TEMEL / RESET
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

html body{
    font-family: var(--mx-font-body);
    color: var(--mx-text);
    background-color: var(--mx-paper);
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body *{ -webkit-tap-highlight-color: transparent; }
body img{ max-width:100%; }
body ::selection{ background: var(--mx-accent); color:#fff; }

body a{ transition: color .28s var(--mx-ease), opacity .28s var(--mx-ease); }
body a:hover{ text-decoration:none; }

body::-webkit-scrollbar{ width:10px; }
body::-webkit-scrollbar-track{ background: var(--mx-paper-2); }
body::-webkit-scrollbar-thumb{ background:#c9c7c2; border-radius:10px; border:3px solid var(--mx-paper-2); }
body::-webkit-scrollbar-thumb:hover{ background: var(--mx-accent); }

/* ==========================================================================
   02 — TİPOGRAFİ (eski font-* sınıfları yeni sisteme bağlanır)
   ========================================================================== */
body .font-open-sans,
body .font-raleway{ font-family: var(--mx-font-display); }

body .font-exlight{ font-weight:300; }
body .font-light  { font-weight:300; }
body .font-small  { font-weight:400; }
body .font-medium { font-weight:500; }
body .font-bold   { font-weight:700; }
body .font-spacing{ letter-spacing:-.01em; }

body h1, body h2, body h3, body h4, body h5, body h6{
    font-family: var(--mx-font-display);
    color: var(--mx-text);
    letter-spacing:-.028em;
    line-height:1.12;
    font-weight:700;
}
body p{ margin-bottom:1.1em; }

.mx-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family: var(--mx-font-display);
    font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color: var(--mx-accent);
}
.mx-eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.75; }

/* ==========================================================================
   03 — BUTONLAR
   ========================================================================== */
body .btn{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family: var(--mx-font-display);
    font-size:13px !important;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    padding:16px 32px;
    border:1px solid transparent;
    border-radius: var(--mx-radius);
    background: var(--mx-ink);
    color:#fff !important;
    overflow:hidden;
    isolation:isolate;
    box-shadow:none;
    white-space:nowrap;
    transition: color .35s var(--mx-ease), border-color .35s var(--mx-ease), transform .35s var(--mx-ease), background-color .35s var(--mx-ease);
}
body .btn::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background: var(--mx-accent);
    transform: translate3d(-101%,0,0);
    transition: transform .5s var(--mx-ease-out);
}
body .btn:hover{ color:#fff !important; transform: translateY(-2px); }
body .btn:hover::after{ transform: translate3d(0,0,0); }
body .btn:focus, body .btn:active{ box-shadow:none !important; outline:none; }
body .btn.btn-sm{ padding:12px 24px; font-size:12px !important; }
body .btn.btn-lg{ padding:19px 42px; }
body .btn i{ font-size:14px; transition: transform .4s var(--mx-ease); }
body .btn:hover i{ transform: translateX(4px); }

body .btn-primary, body .btn-info{ background: var(--mx-ink); border-color: var(--mx-ink); }
body .btn-danger, body .btn-warning{ background: var(--mx-accent); border-color: var(--mx-accent); }
body .btn-danger::after, body .btn-warning::after{ background: var(--mx-ink); }
body .btn-success{ background:#12805a; border-color:#12805a; }
body .btn-success::after{ background: var(--mx-ink); }
body .btn-secondary, body .btn-dark{ background: var(--mx-ink-2); border-color: var(--mx-ink-2); }
body .btn-light, body .btn-default{
    background:transparent; color: var(--mx-text) !important; border-color: rgba(13,14,16,.28);
}
body .btn-light:hover, body .btn-default:hover{ color:#fff !important; border-color: var(--mx-accent); }
body .btn-outline-light{ background:transparent; border-color: rgba(255,255,255,.55); color:#fff !important; }
body .btn-outline-light:hover{ border-color: var(--mx-accent); }

.mx-link{
    display:inline-flex; align-items:center; gap:12px;
    font-family: var(--mx-font-display); font-size:12px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color: var(--mx-text);
}
.mx-link::after{ content:""; width:34px; height:1px; background:currentColor; transition: width .4s var(--mx-ease); }
.mx-link:hover{ color: var(--mx-accent); }
.mx-link:hover::after{ width:52px; }

/* ==========================================================================
   04 — BÖLÜM KAPSAYICILARI (sabit px genişlikler akışkan hale getirilir)
   ========================================================================== */
body .service-home-main-div,
body .abouts-home-main-div,
body .proje-home-main-div,
body .counter-home-main-div,
body .blog-home-main-div,
body .ekip-home-main-div,
body .ozellik-home-main-div,
body .photo-gallery-home-main-div,
body .video-gallery-home-main-div,
body .comments-home-main-div,
body .clients-home-main-div,
body .certificate-home-main-div,
body .skills-home-main-div,
body .faq-home-main-div,
body .pricing-home-main-div,
body .bulten-home-main-div,
body .footer-main-div{
    width:100% !important;
    max-width:100% !important;
    overflow:visible;
}

body .service-home-main-div.service-home-main-div,
body .abouts-home-main-div.abouts-home-main-div,
body .proje-home-main-div.proje-home-main-div,
body .blog-home-main-div.blog-home-main-div,
body .ekip-home-main-div.ekip-home-main-div,
body .ozellik-home-main-div.ozellik-home-main-div,
body .video-gallery-home-main-div.video-gallery-home-main-div,
body .comments-home-main-div.comments-home-main-div,
body .clients-home-main-div.clients-home-main-div,
body .certificate-home-main-div.certificate-home-main-div,
body .skills-home-main-div.skills-home-main-div,
body .faq-home-main-div.faq-home-main-div,
body .pricing-home-main-div.pricing-home-main-div{
    padding: var(--mx-section) 0 !important;
    position:relative;
}

/* Bölüm zemin ritmi */
body .service-home-main-div.service-home-main-div{ background: var(--mx-paper) !important; }
body .abouts-home-main-div.abouts-home-main-div{ background: var(--mx-paper) !important; }
body .proje-home-main-div.proje-home-main-div{ background: var(--mx-paper-2) !important; }
body .ozellik-home-main-div.ozellik-home-main-div{ background: var(--mx-paper-2) !important; padding-top:0 !important; }
body .blog-home-main-div.blog-home-main-div{ background: var(--mx-paper) !important; }
body .ekip-home-main-div.ekip-home-main-div{ background: var(--mx-paper-2) !important; }
body .comments-home-main-div.comments-home-main-div{ background: var(--mx-paper-2) !important; }
body .clients-home-main-div.clients-home-main-div{ background: var(--mx-paper) !important; }
body .photo-gallery-home-main-div.photo-gallery-home-main-div{ background: var(--mx-ink) !important; padding:0 !important; }
body .counter-home-main-div.counter-home-main-div{ background: var(--mx-ink) !important; padding: clamp(56px,6vw,96px) 0 !important; }

/* İç kapsayıcılar */
body .service-home-main-div-inside,
body .service-home-main-div-inside-2,
body .abouts-home-main-div-inside,
body .proje-home-main-div-inside,
body .counter-home-main-div-inside,
body .blog-home-main-div-inside,
body .ekip-home-main-div-inside,
body .ozellik-home-main-div-inside,
body .comments-home-main-div-inside,
body .clients-home-main-div-inside,
body .modules-header-main,
body .modules-header-about,
body .modules-header-main-product-group{
    width:100% !important;
    max-width: var(--mx-container) !important;
    margin:0 auto !important;
    padding-left: var(--mx-gutter);
    padding-right: var(--mx-gutter);
    overflow:visible !important;
    text-align:left !important;
}

/* ==========================================================================
   05 — BÖLÜM BAŞLIKLARI
   ========================================================================== */
body .modules-header-main,
body .modules-header-about,
body .modules-header-main-product-group{ margin-bottom: clamp(40px,5vw,72px) !important; }

body .modules-header-main-head{
    background-image:none !important;
    padding-bottom:0 !important;
    text-align:left !important;
    max-width:900px;
}
body .modules-header-main-baslik{
    position:relative;
    font-family: var(--mx-font-display) !important;
    font-size: clamp(30px,4.2vw,54px) !important;
    font-weight:800 !important;
    line-height:1.05 !important;
    letter-spacing:-.035em !important;
    text-align:left !important;
    color: var(--mx-ink) !important;
    margin:0 0 18px !important;
    padding-top:26px;
}
body .modules-header-main-baslik::before{
    content:""; position:absolute; top:0; left:0; width:46px; height:3px; background: var(--mx-accent);
}
body .modules-header-main-spot{
    font-family: var(--mx-font-body) !important;
    font-size: clamp(15px,1.3vw,17px) !important;
    font-weight:400 !important;
    line-height:1.7 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    color: var(--mx-muted) !important;
    max-width:640px !important;
    margin:0 !important;
}
/* Zaten iç boşluğu olan kapsayıcıların içindeki başlıklarda çift gutter olmasın */
body [class*="-page-text-main"] .modules-header-main,
body [class*="-page-text-main"] .modules-header-main-product-group,
body .contact-page-form-area .modules-header-main,
body .contact-page-infos-ust .modules-header-main,
body .mx-about-grid .modules-header-main{
    padding-left:0 !important; padding-right:0 !important; max-width:none !important;
}

body .photo-gallery-home-main-div .modules-header-main-baslik,
body .counter-home-main-div .modules-header-main-baslik{ color:#fff !important; }
body .photo-gallery-home-main-div .modules-header-main-spot,
body .counter-home-main-div .modules-header-main-spot{ color: var(--mx-muted-2) !important; }

/* ==========================================================================
   06 — ÜST BAR (telefon / sosyal)
   ========================================================================== */
body .header-ust-bar-main.header-ust-bar-main{
    width:100% !important;
    padding:0 !important;
    background: var(--mx-ink) !important;
    border-bottom:1px solid var(--mx-line-dark) !important;
    position:relative; z-index:60;
}
body .header-ust-bar-in{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important;
    padding:0 var(--mx-gutter) !important;
    display:flex !important; align-items:center; justify-content:space-between;
    min-height:44px;
}
body .header-ust-bar-left,
body .header-ust-bar-right{ width:auto !important; display:flex !important; align-items:center; }
body .header-ust-bar-left-table,
body .header-ust-bar-right-table{ min-height:0 !important; display:flex !important; align-items:center; width:auto !important; }
body .header-ust-bar-left-table-ic,
body .header-ust-bar-right-table-ic{ display:flex !important; align-items:center; gap:4px; width:auto !important; }

body .header-ust-bar-left-table-ic a{
    display:inline-flex; align-items:center; justify-content:center;
    width:32px; height:32px; margin:0 !important;
    color: var(--mx-muted-2) !important;
    transition: color .3s var(--mx-ease), transform .3s var(--mx-ease);
}
body .header-ust-bar-left-table-ic a:hover{ color: var(--mx-accent) !important; transform: translateY(-2px); }
body .header-ust-bar-left-table-ic a i{ color:inherit !important; font-size:14px; }

body .header-ust-bar-right-table-ic-box{
    display:inline-flex !important; align-items:center; gap:8px;
    margin:0 0 0 22px !important; padding:0 !important; height:44px;
}
body .header-ust-bar-right-table-ic-box i{ color: var(--mx-accent) !important; font-size:13px !important; }
body .header-ust-bar-right-table-ic-box p{
    margin:0 !important; padding:0 !important;
    font-family: var(--mx-font-body) !important;
    font-size:12.5px !important; font-weight:500;
    letter-spacing:.02em; color: var(--mx-muted-2) !important;
    line-height:1 !important;
}
body .header-ust-bar-right-table-ic-box p a{ color: var(--mx-muted-2) !important; }
body .header-ust-bar-right-table-ic-box p a:hover{ color:#fff !important; }
body .header-ust-bar-right-table-ic .btn{ margin-left:18px; padding:8px 18px; font-size:11px !important; }

body .kargo-limit-header{ width:100% !important; }

/* ==========================================================================
   07 — ANA HEADER (sticky + hero üzerinde şeffaf)
   ========================================================================== */
body header{ position:relative; z-index:900; }

body .header-main.header-main{
    width:100% !important;
    background: var(--mx-ink) !important;
    border-bottom:1px solid var(--mx-line-dark);
    transition: background-color .45s var(--mx-ease), backdrop-filter .45s var(--mx-ease), box-shadow .45s var(--mx-ease);
}
body .header-main-in{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    display:flex !important; align-items:center; justify-content:space-between; gap:28px;
}
body .header-main-left{ width:auto !important; display:flex !important; align-items:center; }
body .header-main-right{ width:auto !important; flex:1; display:flex !important; justify-content:flex-end; }
body .header-main-left-table,
body .header-main-right-table{ display:flex !important; align-items:center; min-height: var(--mx-header-h) !important; width:auto !important; }
body .header-main-right-table{ width:100% !important; justify-content:flex-end; }
body .header-main-left-table-ic,
body .header-main-right-table-ic{ display:flex !important; align-items:center; width:auto !important; }
body .header-main-right-table-ic{ width:100% !important; justify-content:flex-end; gap:8px; }

body .header-main-left-table-ic img{
    max-width:200px !important; max-height:58px !important;
    margin:0 !important; width:auto; height:auto;
    transition: max-height .4s var(--mx-ease), opacity .3s var(--mx-ease);
}
body .header-main-menu-div{ padding-top:0 !important; display:flex !important; align-items:center; }

/* Şeffaf hero modu — anasayfada header hero'nun üzerine biner */
@media screen and (min-width:1101px){
    body.mx-has-hero header{
        position:absolute; top:0; left:0; right:0; z-index:900;
        /* Hero görselinin üzerinde okunabilirlik için ince koyu perde */
        background: linear-gradient(to bottom,
            rgba(9,10,12,.78) 0%,
            rgba(9,10,12,.42) 58%,
            rgba(9,10,12,0) 100%);
    }
    body.mx-has-hero.mx-scrolled header{ background:none; }
    body.mx-has-hero .header-ust-bar-main.header-ust-bar-main{
        background: transparent !important;
        border-bottom-color: rgba(255,255,255,.16) !important;
    }
    body.mx-has-hero .header-main.header-main{
        background: transparent !important;
        border-bottom-color: transparent;
    }
    /* Sayfa kaydırıldığında: sabitlenir, koyu cam efekti, üst bar gizlenir */
    body.mx-scrolled header{
        position:fixed; top:0; left:0; right:0; z-index:900;
        animation: mxHeaderDrop .5s var(--mx-ease-out) both;
    }
    body.mx-scrolled .header-ust-bar-main.header-ust-bar-main{
        max-height:0; overflow:hidden; opacity:0; border-bottom:0 !important;
        transition: max-height .4s var(--mx-ease), opacity .3s var(--mx-ease);
    }
    body .header-ust-bar-main.header-ust-bar-main{
        max-height:80px; opacity:1;
        transition: max-height .4s var(--mx-ease), opacity .3s var(--mx-ease);
    }
    body.mx-scrolled .header-main.header-main{
        background: rgba(13,14,16,.92) !important;
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        box-shadow: 0 18px 40px -30px rgba(0,0,0,.9);
        border-bottom-color: rgba(255,255,255,.08);
    }
    body.mx-scrolled .header-main-left-table,
    body.mx-scrolled .header-main-right-table{ min-height:72px !important; }
    body.mx-scrolled .header-main-left-table-ic img{ max-height:44px !important; }
    /* Hero olmayan sayfalarda header akışta kalıp yapışır (sticky) */
    body:not(.mx-has-hero) header{ position:sticky; top:0; z-index:900; animation:none !important; }
    body:not(.mx-has-hero).mx-scrolled header{ position:sticky; }
}
@media screen and (max-width:1100px){
    body.mx-scrolled header{ position:sticky; top:0; z-index:900; }
}
@keyframes mxHeaderDrop{ from{ transform: translateY(-100%);} to{ transform: translateY(0);} }

/* ==========================================================================
   08 — ANA MENÜ / AÇILIR MENÜLER
   ========================================================================== */
body .top-level-menu{ display:flex !important; align-items:center; gap:2px; }
body .top-level-menu > li{
    position:relative; float:none !important;
    height:auto !important; margin:0 !important; padding:0 !important;
    background:transparent !important;
}
body .top-level-menu > li:hover{ background:transparent !important; }
body .top-level-menu > li > a{ display:block; padding:0; }
body .top-level-menu > li span{
    position:relative;
    display:flex !important; align-items:center; gap:7px;
    height:auto !important; line-height:1 !important;
    padding:14px 16px !important;
    font-family: var(--mx-font-display) !important;
    font-size:12.5px !important; font-weight:600 !important;
    letter-spacing:.11em; text-transform:uppercase;
    color: rgba(255,255,255,.82) !important;
    transition: color .3s var(--mx-ease);
}
body .top-level-menu > li span::after{
    content:""; position:absolute; left:16px; right:16px; bottom:6px;
    height:1.5px; background: var(--mx-accent);
    transform: scaleX(0); transform-origin:left center;
    transition: transform .42s var(--mx-ease-out);
}
body .top-level-menu > li:hover span,
body .top-level-menu > li.mx-active span{ color:#fff !important; }
body .top-level-menu > li:hover span::after,
body .top-level-menu > li.mx-active span::after{ transform: scaleX(1); }
body .top-level-menu > li span i{ font-size:12px !important; opacity:.6; transition: transform .3s var(--mx-ease); }
body .top-level-menu > li:hover span i{ transform: rotate(180deg); opacity:1; }

/* 2. ve 3. seviye */
body .second-level-menu,
body .third-level-menu{
    border:0 !important; border-top:2px solid var(--mx-accent) !important;
    background: var(--mx-paper) !important;
    box-shadow: var(--mx-shadow-lg) !important;
    padding:8px 0 !important; width:250px !important;
    border-radius:0 0 var(--mx-radius-lg) var(--mx-radius-lg);
    transform: translateY(10px);
    transition: opacity .3s var(--mx-ease), transform .35s var(--mx-ease-out), visibility .3s;
}
body .second-level-menu:after,
body .third-level-menu:after,
body .mega-level-menu:after{ display:none !important; }
body .top-level-menu li:hover > ul{ top:100% !important; margin-top:0 !important; transform: translateY(0); }
body .third-level-menu{ left:250px !important; top:-10px !important; }
/* 3. seviye menü, 2. seviye li hover'ında yanda açılmalı (üstte değil) */
body .top-level-menu li:hover > ul.third-level-menu,
body .second-level-menu li:hover > ul.third-level-menu{ top:-10px !important; left:250px !important; }
body .second-level-menu > li,
body .third-level-menu > li{ background:transparent !important; }
body .second-level-menu > li:hover,
body .third-level-menu > li:hover{ background: var(--mx-paper-2) !important; }
body .second-level-menu > li p,
body .third-level-menu > li p{
    padding:11px 20px !important; margin:0 !important;
    font-family: var(--mx-font-body) !important;
    font-size:13.5px !important; font-weight:500 !important;
    color: var(--mx-text) !important; text-shadow:none !important;
    transition: padding-left .3s var(--mx-ease), color .3s var(--mx-ease);
}
body .second-level-menu > li:hover > a p,
body .third-level-menu > li:hover > a p{ padding-left:26px !important; color: var(--mx-accent) !important; }
body .second-level-menu i{ margin-top:2px !important; opacity:.45; }

/* Mega menü */
body .mega-level-menu{
    border:0 !important; border-top:2px solid var(--mx-accent) !important;
    background: var(--mx-paper) !important;
    box-shadow: var(--mx-shadow-lg) !important;
    transform: translateY(10px);
    transition: opacity .3s var(--mx-ease), transform .35s var(--mx-ease-out), visibility .3s;
}
body .mega-menu-product-box img{ transition: transform .5s var(--mx-ease); }
body .mega-menu-product-box:hover img{ transform: scale(1.06); }
body .mega-menu-product-head{
    font-family: var(--mx-font-display) !important;
    letter-spacing:.14em; text-transform:uppercase; font-size:11px !important;
    color: var(--mx-muted) !important;
}

/* Header sağ ikonlar (arama / sepet / dil) */
body .header-main-menu-other-div{ padding:0 4px !important; }
body .header-main-menu-other-div i{ color: rgba(255,255,255,.8) !important; font-size:16px !important; transition: color .3s var(--mx-ease); }
body .header-main-menu-other-div:hover i{ color: var(--mx-accent) !important; }
body .dropdown-box-type-cart{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    transition: border-color .3s var(--mx-ease), background-color .3s var(--mx-ease);
}
body .dropdown-box-type-cart:hover{ border-color: var(--mx-accent); background: rgba(224,27,25,.12); }
body .dropdown-text-type-2{
    display:inline-flex !important; align-items:center; gap:8px;
    padding:9px 14px !important; border-radius: var(--mx-radius) !important;
    background: rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important;
    font-family: var(--mx-font-display); font-size:12px; font-weight:600; letter-spacing:.08em;
}
body .dropdown-text-type-2:hover{ border-color: var(--mx-accent) !important; }
body .shopping-detail{
    position:absolute; top:-4px; right:-4px;
    min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:50%; background: var(--mx-accent) !important; color:#fff !important;
    font-size:10px !important; font-weight:700; padding:0 5px;
}
body .dropdown-menu{
    border:0 !important; border-top:2px solid var(--mx-accent) !important;
    border-radius:0 0 var(--mx-radius-lg) var(--mx-radius-lg) !important;
    box-shadow: var(--mx-shadow-lg) !important; padding:10px 0 !important;
}
body .dropdown-arrow-before,
body .dropdown-arrow-before-cart,
body .dropdown-arrow-before-search,
body .dropdown-arrow-before-lang-2{ display:none !important; }
body .dropdown-item{ padding:10px 18px !important; font-size:13.5px !important; font-family: var(--mx-font-body) !important; }
body .dropdown-item:hover{ background: var(--mx-paper-2) !important; color: var(--mx-accent) !important; }
body .dropdown-box-type-search-show form input{
    border:1px solid var(--mx-line) !important; border-radius: var(--mx-radius) !important;
    font-family: var(--mx-font-body) !important;
}
body .dropdown-box-type-search-show form input:focus{ border-color: var(--mx-accent) !important; outline:none; }

/* ==========================================================================
   09 — SABİT (FIXED) HEADER
   ========================================================================== */
/* Yeni header zaten yapışkan (sticky/fixed) davrandığı için eski "sabit header"
   modülü çift başlık oluşturmasın diye gizlenir. Panelde açık kalabilir. */
body #fixed-header-main{ display:none !important; }

/* ==========================================================================
   10 — MOBİL HEADER + MENÜ
   ========================================================================== */
body .header-mobile-main{
    padding:0 !important; background: var(--mx-ink) !important;
    display:none; position:relative; z-index:900;
}
@media screen and (max-width:1100px){
    body .header-mobile-main{ display:block !important; }
    body .header-mobile-main > .header-mobile-logo,
    body .header-mobile-main > .header-mobile-right{ display:inline-block; vertical-align:middle; }
    body .header-mobile-logo{ width:58% !important; padding:14px 0 14px var(--mx-gutter) !important; text-align:left !important; }
    body .header-mobile-logo img{ max-height:44px !important; width:auto !important; }
    body .header-mobile-right{ width:42% !important; padding-right: var(--mx-gutter) !important; text-align:right !important; }
    body.mx-scrolled .header-mobile-main{
        background: rgba(13,14,16,.96) !important;
        -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
        box-shadow: 0 16px 34px -30px rgba(0,0,0,.9);
    }
    /* Mobilde masaüstü menü satırı gizli kalır (menü hamburger'da) */
    body .header-main.header-main{ display:none !important; }

    /* --- MOBİL İLETİŞİM BARI: telefon / whatsapp / mail / sosyal görünür --- */
    body .header-ust-bar-main.header-ust-bar-main{
        display:block !important;
        width:100% !important;
        max-height:none !important;
        opacity:1 !important;
        padding:0 !important;
        background: var(--mx-ink-2) !important;
        border-bottom:1px solid rgba(255,255,255,.08) !important;
    }
    body .header-ust-bar-in{
        flex-direction: column-reverse !important;   /* önce iletişim, altında sosyal */
        align-items:center !important;
        min-height:0 !important;
        padding:7px var(--mx-gutter) !important;
        gap:2px;
    }
    body .header-ust-bar-left,
    body .header-ust-bar-right{ width:100% !important; justify-content:center !important; }
    body .header-ust-bar-left-table,
    body .header-ust-bar-right-table{ width:100% !important; justify-content:center !important; }
    body .header-ust-bar-right-table-ic{
        width:100% !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:2px 16px;
    }
    body .header-ust-bar-right-table-ic-box{
        margin:0 !important;
        height:26px !important;
        gap:6px;
    }
    body .header-ust-bar-right-table-ic-box i{ font-size:12px !important; }
    body .header-ust-bar-right-table-ic-box p{ font-size:11.5px !important; letter-spacing:.01em; }
    body .header-ust-bar-right-table-ic .btn{
        margin:5px 4px 2px !important;
        padding:7px 14px !important;
        font-size:10.5px !important;
    }
    body .header-ust-bar-left-table-ic{ justify-content:center !important; gap:2px; }
    body .header-ust-bar-left-table-ic a{ width:28px !important; height:28px !important; }
    body .header-ust-bar-left-table-ic a i{ font-size:13px !important; }
}
/* Çok dar ekranlarda sosyal ikonlar mobil menüde zaten var — bar sade kalsın */
@media screen and (max-width:420px){
    body .header-ust-bar-main .header-ust-bar-left{ display:none !important; }
    body .header-ust-bar-right-table-ic{ gap:2px 12px; }
    body .header-ust-bar-right-table-ic-box p{ font-size:11px !important; }
}
body .mobile-menu-bar-button{ background:transparent !important; border:0 !important; outline:none !important; padding:6px !important; }
body #nav-icon1 span{ background: #fff !important; height:2px !important; border-radius:2px; }
body .header-mobile-right-cart i{ color:#fff !important; }

body .opening-mobile-menu-div{
    background: var(--mx-ink) !important;
    border-top:1px solid var(--mx-line-dark);
    max-height: calc(100vh - 80px); overflow-y:auto;
}
body .mobile-menu-social-div{ background: var(--mx-ink-2) !important; border:0 !important; padding:14px var(--mx-gutter) !important; }
body .mobile-menu-social-div-left a{ color: var(--mx-muted-2) !important; margin-right:18px; font-size:16px; }
body .mobile-menu-social-div-left a:hover{ color: var(--mx-accent) !important; }
body .ladder.ladder{ background: var(--mx-ink) !important; }
body .ladder a:link, body .ladder a:visited{
    color: rgba(255,255,255,.86) !important;
    font-family: var(--mx-font-display) !important;
    font-size:14px !important; font-weight:600 !important;
    letter-spacing:.06em; text-transform:uppercase;
    padding:16px var(--mx-gutter) !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
}
body .ladder a:hover{ background: var(--mx-ink-2) !important; color: var(--mx-accent) !important; }
body .ladder ul ul a:link, body .ladder ul ul a:visited{
    font-size:13px !important; font-weight:400 !important; text-transform:none;
    color: var(--mx-muted-2) !important; letter-spacing:0;
}
body .header-mobile-menu-search-area{ background: var(--mx-ink-2) !important; padding:16px var(--mx-gutter) !important; }
body .header-mobile-menu-search-area form{ display:flex; gap:0; }
body .header-mobile-menu-search-area input{
    flex:1; background: rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important;
    color:#fff !important; padding:12px 14px !important; font-size:14px !important; border-radius:0 !important;
}
body .header-mobile-menu-search-area input::placeholder{ color: var(--mx-muted-2) !important; }
body .header-mobile-menu-search-area button{
    background: var(--mx-accent) !important; border:0 !important; color:#fff !important;
    padding:0 20px !important; font-family: var(--mx-font-display); font-size:12px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
}
body .header-mobile-menu-contact-area{ background: var(--mx-ink-2) !important; padding:20px var(--mx-gutter) !important; }
body .header-mobile-menu-contact-box{ color: var(--mx-muted-2) !important; }
body .header-mobile-menu-contact-box i{ color: var(--mx-accent) !important; }
body .header-mobile-menu-contact-box p,
body .header-mobile-menu-contact-box p a{ color: var(--mx-muted-2) !important; font-size:13.5px !important; }
body .offer-tracing-mobile-main-div{ background: var(--mx-ink-2) !important; border-bottom:1px solid rgba(255,255,255,.07) !important; padding:14px var(--mx-gutter) !important; }

/* ==========================================================================
   11 — HERO SLIDER
   ========================================================================== */
body .swiper-container{
    width:100% !important; max-width:100% !important;
    height: clamp(600px, 100vh, 1080px) !important;
    margin:0 !important; position:relative; background: var(--mx-ink);
}
@media screen and (max-width:1100px){
    body .swiper-container{ height: clamp(500px, 88vh, 820px) !important; }
}
body .swiper-slide{
    position:relative; overflow:hidden;
    display:flex !important; align-items:center !important;
    background-position:center center !important; background-size:cover !important;
    text-align:left !important;
}
/* Ken-burns zemin + sinematik karartma */
body .swiper-slide::before{
    content:""; position:absolute; inset:-2%;
    background-image:inherit; background-size:cover; background-position:center;
    transform: scale(1.001); will-change: transform;
}
body .swiper-slide.swiper-slide-active::before{ animation: mxKenBurns 11s linear both; }
@keyframes mxKenBurns{ from{ transform: scale(1.001);} to{ transform: scale(1.12);} }
body .swiper-slide::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:
        linear-gradient(to right, rgba(9,10,12,.86) 0%, rgba(9,10,12,.60) 42%, rgba(9,10,12,.12) 78%, rgba(9,10,12,.35) 100%),
        linear-gradient(to top, rgba(9,10,12,.75) 0%, rgba(9,10,12,0) 46%);
}
/* Slider'ın kendi karartma div'i gizlenir; yerini gradyan alır */
body .swiper-slide > div[style*="rgba(0,0,0,0.6)"]{ display:none !important; }

body .options-slider-box{
    position:relative; z-index:3;
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    overflow:visible !important; text-align:left !important;
}
body .slider-text-div{ width:100% !important; max-width:780px !important; overflow:visible !important; }

body .slider-font-type-baslik{
    font-family: var(--mx-font-display) !important;
    font-size: clamp(36px, 6.2vw, 86px) !important;
    font-weight:800 !important;
    line-height:.98 !important;
    letter-spacing:-.04em !important;
    margin-bottom:26px !important;
    text-align:left !important;
    color:#fff !important;
    text-wrap: balance;
}
body .slider-font-type-baslik::after{
    content:""; display:block; width:64px; height:3px;
    background: var(--mx-accent); margin-top:26px;
}
body .slider-font-type-spot{
    font-family: var(--mx-font-body) !important;
    font-size: clamp(15px, 1.35vw, 19px) !important;
    font-weight:400 !important;
    line-height:1.7 !important;
    letter-spacing:0 !important;
    max-width:560px;
    color: rgba(255,255,255,.82) !important;
    text-align:left !important;
    margin-bottom:8px !important;
}
body .slider-button-type,
body .slider-button-type-2{
    margin-top:34px !important;
    padding:18px 40px !important;
    font-family: var(--mx-font-display) !important;
    font-size:13px !important; font-weight:700 !important;
    letter-spacing:.11em !important;
}
body .options-slider-just-button .slider-button-type-2{ margin-top:0 !important; }
body .options-slider-just-button{ text-align:left; }

/* Slider navigasyon */
body .swiper-button-next,
body .swiper-button-prev{
    width:58px !important; height:58px !important;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    background-image:none !important;
    display:flex; align-items:center; justify-content:center;
    color:#fff; z-index:12;
    transition: background-color .35s var(--mx-ease), border-color .35s var(--mx-ease), transform .35s var(--mx-ease);
    top:auto !important; bottom: 54px !important;
    margin-top:0 !important;
}
body .swiper-button-next::after,
body .swiper-button-prev::after{
    font-family:"FontAwesome" !important; font-size:16px !important; line-height:1;
}
body .swiper-button-prev::after{ content:"\f104" !important; }
body .swiper-button-next::after{ content:"\f105" !important; }
body .swiper-button-next:hover,
body .swiper-button-prev:hover{ background: var(--mx-accent); border-color: var(--mx-accent); transform: scale(1.06); }
body .swiper-button-prev{ left:auto !important; right: calc(var(--mx-gutter) + 74px) !important; }
body .swiper-button-next{ right: var(--mx-gutter) !important; }
@media screen and (max-width:1100px){
    body .swiper-button-next, body .swiper-button-prev{ width:46px !important; height:46px !important; bottom:26px !important; }
    body .swiper-button-prev{ right: calc(var(--mx-gutter) + 56px) !important; }
}

body .swiper-pagination{
    display:flex; align-items:center; gap:10px;
    left: var(--mx-gutter) !important; right:auto !important;
    bottom:58px !important; width:auto !important; z-index:12;
}
body .swiper-pagination-bullet{
    width:34px !important; height:3px !important;
    border-radius:0 !important; background: rgba(255,255,255,.3) !important;
    opacity:1 !important; margin:0 !important;
    transition: background-color .4s var(--mx-ease), width .4s var(--mx-ease);
}
body .swiper-pagination-bullet-active{ width:64px !important; background: var(--mx-accent) !important; }
@media screen and (max-width:1100px){ body .swiper-pagination{ bottom:28px !important; } }

/* Kaydırma ipucu */
.mx-scroll-cue{
    position:absolute; left:50%; bottom:34px; transform: translateX(-50%);
    z-index:12; display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family: var(--mx-font-display); font-size:10px; font-weight:700;
    letter-spacing:.24em; text-transform:uppercase; color: rgba(255,255,255,.6);
    pointer-events:none;
}
.mx-scroll-cue span{ display:block; width:1px; height:46px; background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent); position:relative; overflow:hidden; }
.mx-scroll-cue span::after{
    content:""; position:absolute; left:0; top:-46px; width:1px; height:46px;
    background: var(--mx-accent); animation: mxCue 2.4s var(--mx-ease) infinite;
}
@keyframes mxCue{ 0%{ transform: translateY(0);} 60%,100%{ transform: translateY(92px);} }
@media screen and (max-width:1100px){ .mx-scroll-cue{ display:none; } }

/* Slider metin giriş animasyonu (AOS devre dışı kalsa da çalışır) */
body .swiper-slide-active .slider-section{ animation: mxSlideIn .95s var(--mx-ease-out) both; }
body .swiper-slide-active .slider-section:nth-child(2){ animation-delay:.12s; }
body .swiper-slide-active .slider-section:nth-child(3){ animation-delay:.24s; }
@keyframes mxSlideIn{
    from{ opacity:0; transform: translate3d(0,34px,0); clip-path: inset(0 0 100% 0); }
    to  { opacity:1; transform: translate3d(0,0,0);    clip-path: inset(0 0 0 0); }
}

/* Orta slider */
body .swiper-container-slider-2{ width:100% !important; max-width:100% !important; }
body .slider-section2{ position:relative; z-index:3; }

/* ==========================================================================
   12 — HAKKIMIZDA MODÜLÜ
   ========================================================================== */
body .mx-about-grid{
    width:100%; max-width: var(--mx-container);
    margin:0 auto; padding:0 var(--mx-gutter);
    display:grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 4vw, 80px);
    align-items:start;
}
@media screen and (max-width:900px){
    body .mx-about-grid{ grid-template-columns:1fr; gap:24px; }
}
body .mx-about-grid .modules-header-about{
    padding:0 !important; margin:0 !important; max-width:none !important;
}
body .mx-about-grid .modules-header-main-baslik{
    font-size: clamp(30px,3.9vw,50px) !important;
    margin-bottom:0 !important;
}
body .abouts-home-main-div-inside{
    padding:0 !important; margin:0 !important; max-width:none !important;
    text-align:left !important;
    font-family: var(--mx-font-body) !important;
    font-size: clamp(15px,1.22vw,17px) !important;
    line-height:1.85 !important;
    color: var(--mx-muted) !important;
}
body .abouts-home-main-div-inside p{ color:inherit !important; }
body .mx-about-action{ margin-top:30px; }
/* Sol sütunda ince dikey vurgu çizgisi */
@media screen and (min-width:901px){
    body .mx-about-col-right{ position:relative; padding-left: clamp(24px,3vw,44px); }
    body .mx-about-col-right::before{
        content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
        background: linear-gradient(to bottom, var(--mx-accent) 0 56px, var(--mx-line) 56px 100%);
    }
}

/* ==========================================================================
   13 — HİZMETLER
   ========================================================================== */
/* Ortak grid */
body .service-home-main-div-inside,
body .service-home-main-div-inside-2{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(20px, 2.4vw, 34px);
    text-align:left !important;
}
@media screen and (max-width:1023px){
    body .service-home-main-div-inside,
    body .service-home-main-div-inside-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media screen and (max-width:640px){
    body .service-home-main-div-inside,
    body .service-home-main-div-inside-2{ grid-template-columns: 1fr; }
}
/* Owl carousel kullanılan tipte grid devre dışı (sınıf modern.js tarafından eklenir) */
body .mx-has-owl.mx-has-owl{ display:block !important; }
/* :has() destekleyen tarayıcılarda JS beklenmeden uygulanır */
@supports selector(:has(*)){
    body [class*="-inside"]:has(> .owl-carousel),
    body [class*="-page-content"]:has(> .owl-carousel){ display:block !important; }
}

/* --- TİP 0: görselli kart --- */
body .service-image-box{
    position:relative; display:block !important;
    max-width:none !important; width:auto !important;
    margin:0 !important;
    background: var(--mx-paper);
    border:1px solid var(--mx-line);
    border-radius: var(--mx-radius-lg);
    overflow:hidden;
    transition: transform .55s var(--mx-ease-out), box-shadow .55s var(--mx-ease-out), border-color .4s var(--mx-ease);
}
body .service-image-box::before{
    content:""; position:absolute; left:0; top:0; height:3px; width:100%;
    background: var(--mx-accent); z-index:4;
    transform: scaleX(0); transform-origin:left center;
    transition: transform .6s var(--mx-ease-out);
}
body .service-image-box:hover{
    transform: translateY(-8px);
    box-shadow: var(--mx-shadow-lg);
    border-color: transparent;
}
body .service-image-box:hover::before{ transform: scaleX(1); }
body .service-image-box a:first-child{ display:block; position:relative; overflow:hidden; }
body .service-image-box a:first-child::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(to top, rgba(13,14,16,.55), rgba(13,14,16,0) 55%);
    opacity:0; transition: opacity .5s var(--mx-ease);
}
body .service-image-box:hover a:first-child::after{ opacity:1; }
body .service-image-box img{
    width:100% !important; height:clamp(200px,20vw,260px) !important;
    object-fit:cover; margin:0 !important; display:block;
    transition: transform .9s var(--mx-ease-out), filter .6s var(--mx-ease);
    filter: grayscale(18%) contrast(1.03);
}
body .service-image-box:hover img{ transform: scale(1.08); filter: grayscale(0%) contrast(1.06); }
body .service-image-box h1{
    font-family: var(--mx-font-display) !important;
    font-size:20px !important; font-weight:700 !important;
    letter-spacing:-.02em; line-height:1.25 !important;
    margin:0 !important; padding:26px 28px 10px !important;
    text-align:left !important; color: var(--mx-ink) !important;
    transition: color .3s var(--mx-ease);
}
body .service-image-box:hover h1{ color: var(--mx-accent) !important; }
body .service-image-box h2{
    font-family: var(--mx-font-body) !important;
    font-size:14.5px !important; font-weight:400 !important;
    line-height:1.7 !important; text-align:left !important;
    color: var(--mx-muted) !important;
    margin:0 !important; padding:0 28px 28px !important;
}

/* --- TİP 1: yatay ikonlu kart --- */
body .service-icon-1-box{
    position:relative;
    display:flex !important; align-items:flex-start; gap:22px;
    width:auto !important; height:auto !important;
    margin:0 !important;
    padding:34px 30px !important;
    background: var(--mx-paper);
    border:1px solid var(--mx-line);
    border-radius: var(--mx-radius-lg);
    overflow:hidden;
    transition: transform .5s var(--mx-ease-out), box-shadow .5s var(--mx-ease-out), background-color .45s var(--mx-ease);
}
body .service-icon-1-box::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
    background: var(--mx-accent);
    transform: scaleX(0); transform-origin:left center;
    transition: transform .6s var(--mx-ease-out);
}
body .service-icon-1-box:hover{ transform: translateY(-6px); box-shadow: var(--mx-shadow); }
body .service-icon-1-box:hover::after{ transform: scaleX(1); }
body .service-icon-1-icon{
    flex:0 0 auto; width:58px !important; height:58px !important;
    display:flex !important; align-items:center; justify-content:center;
    background: var(--mx-accent-soft);
    border-radius: var(--mx-radius-lg);
    transition: background-color .45s var(--mx-ease), transform .5s var(--mx-ease-out);
}
body .service-icon-1-box:hover .service-icon-1-icon{ background: var(--mx-accent); transform: rotate(-6deg) scale(1.05); }
body .service-icon-1-icon i{
    font-size:23px !important; color: var(--mx-accent) !important;
    transition: color .45s var(--mx-ease);
}
body .service-icon-1-box:hover .service-icon-1-icon i{ color:#fff !important; }
body .service-icon-1-text{ flex:1; width:auto !important; height:auto !important; overflow:visible !important; text-align:left !important; }
body .service-icon-1-text h1{
    font-family: var(--mx-font-display) !important;
    font-size:18px !important; font-weight:700 !important;
    letter-spacing:-.02em; margin:0 0 10px !important;
    color: var(--mx-ink) !important; transition: color .3s var(--mx-ease);
}
body .service-icon-1-box:hover .service-icon-1-text h1{ color: var(--mx-accent) !important; }
body .service-icon-1-text h2{
    font-family: var(--mx-font-body) !important;
    font-size:14.5px !important; font-weight:400 !important;
    line-height:1.7 !important; margin:0 !important;
    color: var(--mx-muted) !important;
}

/* --- TİP 2: dikey ikonlu kart --- */
body .service-icon-2-box{
    position:relative;
    display:flex !important; flex-direction:column; align-items:flex-start;
    width:auto !important; height:auto !important;
    margin:0 !important; padding:42px 34px !important;
    background: var(--mx-paper);
    border:1px solid var(--mx-line);
    border-radius: var(--mx-radius-lg);
    overflow:hidden;
    transition: transform .55s var(--mx-ease-out), box-shadow .55s var(--mx-ease-out), background-color .5s var(--mx-ease);
}
body .service-icon-2-box::before{
    content:""; position:absolute; inset:0; z-index:0;
    background: var(--mx-ink);
    transform: translate3d(0,101%,0);
    transition: transform .6s var(--mx-ease-out);
}
body .service-icon-2-box > *{ position:relative; z-index:1; }
body .service-icon-2-box:hover{ transform: translateY(-8px); box-shadow: var(--mx-shadow-lg); }
body .service-icon-2-box:hover::before{ transform: translate3d(0,0,0); }
body .service-icon-2-box i{
    font-size:38px !important; color: var(--mx-accent) !important;
    margin-bottom:30px; transition: transform .5s var(--mx-ease-out);
}
body .service-icon-2-box:hover i{ transform: translateY(-4px) scale(1.06); }
body .service-icon-2-box h1{
    font-family: var(--mx-font-display) !important;
    font-size:19px !important; font-weight:700 !important;
    text-transform:none !important; letter-spacing:-.02em;
    margin:0 0 14px !important; text-align:left !important;
    color: var(--mx-ink) !important; transition: color .4s var(--mx-ease);
}
body .service-icon-2-box h2{
    font-family: var(--mx-font-body) !important;
    font-size:14.5px !important; line-height:1.7 !important;
    text-align:left !important; margin:0 !important;
    color: var(--mx-muted) !important; transition: color .4s var(--mx-ease);
}
body .service-icon-2-box:hover h1{ color:#fff !important; }
body .service-icon-2-box:hover h2{ color: rgba(255,255,255,.72) !important; }

/* Owl dots */
body .owl-theme .owl-dots .owl-dot span{
    width:28px !important; height:3px !important; border-radius:0 !important;
    background: rgba(13,14,16,.16) !important; margin:6px 4px !important;
}
body .owl-theme .owl-dots .owl-dot.active span{ width:56px !important; background: var(--mx-accent) !important; }

/* ==========================================================================
   14 — PROJELER
   ========================================================================== */
body .proje-home-main-div-inside{ text-align:left !important; }

body .button-group.filters-button-group{
    display:flex; flex-wrap:wrap; gap:10px;
    margin-bottom: clamp(26px,3vw,44px);
    text-align:left;
}
body .filter-button{
    position:relative;
    background: transparent !important;
    color: var(--mx-muted) !important;
    border:1px solid var(--mx-line) !important;
    border-radius:100px !important;
    padding:11px 24px !important;
    font-family: var(--mx-font-display) !important;
    font-size:12px !important; font-weight:600 !important;
    letter-spacing:.09em; text-transform:uppercase;
    outline:none !important; cursor:pointer;
    transition: color .35s var(--mx-ease), border-color .35s var(--mx-ease), background-color .35s var(--mx-ease), transform .35s var(--mx-ease);
}
body .filter-button:hover{ color: var(--mx-ink) !important; border-color: rgba(13,14,16,.34) !important; transform: translateY(-2px); }
body .filter-button.is-checked{
    background: var(--mx-ink) !important; color:#fff !important; border-color: var(--mx-ink) !important;
}

body .filter-project-grid{ margin:0 -10px !important; overflow:visible !important; text-align:left !important; }
body .project-item{
    width:33.3333% !important; padding:10px !important;
    margin:0 !important; float:left; background:transparent !important;
    overflow:visible !important;
}
@media screen and (max-width:1023px){ body .project-item{ width:50% !important; } }
@media screen and (max-width:640px){ body .project-item{ width:100% !important; } }

body .project-item-img{
    position:relative; overflow:hidden;
    width:100% !important; height:auto !important;
    border-radius: var(--mx-radius-lg) !important;
    /* Paspartu (mat) çerçeve — beyaz kenarlık + saç teli halka.
       `padding` yerine `border` kullanılır; çünkü overflow gizleme sınırı
       padding kutusudur, böylece hover'da büyüyen görsel çerçeveyi ezmez. */
    padding:0 !important;
    border: var(--mx-frame) solid var(--mx-paper) !important;
    background: var(--mx-paper) !important;
    box-shadow: 0 0 0 1px var(--mx-frame-line);
    margin:0 !important;
    transition: box-shadow .5s var(--mx-ease-out);
}
body .project-item:hover .project-item-img{
    box-shadow: 0 0 0 1px rgba(13,14,16,.20), var(--mx-shadow);
}
body .project-item-img::after{
    content:""; position:absolute; inset:0; z-index:2;
    background: linear-gradient(to top, rgba(10,11,13,.86) 0%, rgba(10,11,13,.25) 45%, rgba(10,11,13,0) 75%);
    opacity:0; transition: opacity .55s var(--mx-ease);
}
body .project-item-img img{
    width:100% !important; min-width:0 !important; max-width:100% !important;
    height: clamp(230px, 24vw, 330px) !important;
    object-fit:cover; display:block;
    transition: transform 1s var(--mx-ease-out), filter .6s var(--mx-ease);
    filter: grayscale(24%) contrast(1.04);
}
body .project-item:hover .project-item-img img{ transform: scale(1.09); filter: grayscale(0%) contrast(1.08); }
body .project-item:hover .project-item-img::after{ opacity:1; }

/* Hover'da açılan "Projeyi İncele" rozeti */
body .project-item-img .mx-proj-cta{
    position:absolute; z-index:3; left:22px; bottom:20px;
    display:inline-flex; align-items:center; gap:10px;
    font-family: var(--mx-font-display); font-size:11px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:#fff;
    opacity:0; transform: translateY(14px);
    transition: opacity .5s var(--mx-ease), transform .55s var(--mx-ease-out);
}
body .project-item:hover .project-item-img .mx-proj-cta{ opacity:1; transform: translateY(0); }
body .project-item-img .mx-proj-cta i{ color: var(--mx-accent); }
body .project-item-img .mx-proj-plus{
    position:absolute; z-index:3; right:16px; top:16px;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--mx-accent); color:#fff; font-size:15px;
    opacity:0; transform: scale(.5) rotate(-45deg);
    transition: opacity .45s var(--mx-ease), transform .55s var(--mx-ease-out);
}
body .project-item:hover .project-item-img .mx-proj-plus{ opacity:1; transform: scale(1) rotate(0deg); }

body .project-item-text{
    background:transparent !important;
    padding:18px 2px 6px !important;
    text-align:left !important;
    font-family: var(--mx-font-display) !important;
    font-size:17px !important; font-weight:700 !important;
    letter-spacing:-.02em; line-height:1.3;
}
body .project-item-text a{ color: var(--mx-ink) !important; }
body .project-item:hover .project-item-text a{ color: var(--mx-accent) !important; }

/* ==========================================================================
   15 — SAYAÇLAR
   ========================================================================== */
body .counter-home-main-div-inside{
    display:grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(16px,2vw,28px);
    text-align:left !important;
}
@media screen and (max-width:900px){ body .counter-home-main-div-inside{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media screen and (max-width:480px){ body .counter-home-main-div-inside{ grid-template-columns: 1fr; } }

body .counter-box{
    position:relative;
    width:auto !important; margin:0 !important;
    padding:34px 28px !important;
    background: rgba(255,255,255,.035) !important;
    border:1px solid var(--mx-line-dark) !important;
    border-radius: var(--mx-radius-lg);
    color:#fff !important; text-align:left;
    overflow:hidden;
    transition: background-color .45s var(--mx-ease), transform .5s var(--mx-ease-out), border-color .45s var(--mx-ease);
}
body .counter-box::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
    background: var(--mx-accent); transform: scaleX(0); transform-origin:left;
    transition: transform .6s var(--mx-ease-out);
}
body .counter-box:hover{ background: rgba(255,255,255,.06) !important; transform: translateY(-5px); border-color: rgba(255,255,255,.2) !important; }
body .counter-box:hover::after{ transform: scaleX(1); }
body .counter-box i{ font-size:24px !important; color: var(--mx-accent) !important; margin-bottom:18px; display:inline-block; }
body .counter-box span{
    font-family: var(--mx-font-display) !important;
    font-size: clamp(38px,4.4vw,58px) !important;
    font-weight:800 !important; letter-spacing:-.045em;
    color:#fff !important; line-height:1;
}
body .counter-box label{
    display:block; margin-top:12px !important;
    font-family: var(--mx-font-body) !important;
    font-size:13.5px !important; font-weight:400 !important;
    letter-spacing:.04em; color: var(--mx-muted-2) !important;
}

/* ==========================================================================
   16 — ÖZELLİKLER
   ========================================================================== */
body .features-main-header.features-main-header{
    background: var(--mx-ink) !important;
    border-top:1px solid rgba(255,255,255,.07);
    padding: clamp(64px,7vw,110px) var(--mx-gutter) clamp(74px,8vw,124px) !important;
    text-align:left; position:relative; overflow:hidden;
}
body .features-main-header::before{
    content:""; position:absolute; right:-6%; top:-40%;
    width:520px; height:520px; border-radius:50%;
    background: radial-gradient(circle, rgba(224,27,25,.18), transparent 62%);
    pointer-events:none;
}
body .features-main-header-head{
    max-width: var(--mx-container); margin:0 auto 16px !important;
    font-family: var(--mx-font-display) !important;
    font-size: clamp(28px,3.8vw,50px) !important; font-weight:800 !important;
    letter-spacing:-.035em; line-height:1.06;
    color:#fff !important; text-align:left !important;
}
body .features-main-header-spot{
    max-width: var(--mx-container); margin:0 auto !important;
    font-family: var(--mx-font-body) !important;
    font-size: clamp(15px,1.25vw,17px) !important; line-height:1.7;
    color: var(--mx-muted-2) !important; text-align:left !important;
}
body .features-main-header-head > *,
body .features-main-header-spot > *{ max-width:720px; }
body .features-bottom-arrow{ display:none !important; }

body .ozellik-home-main-div-inside{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(18px,2.2vw,30px);
    margin-top: calc(-1 * clamp(40px,4.5vw,66px)) !important;
    position:relative; z-index:3;
}
@media screen and (max-width:1023px){ body .ozellik-home-main-div-inside{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media screen and (max-width:640px){ body .ozellik-home-main-div-inside{ grid-template-columns:1fr; } }

body .features-box{
    display:flex !important; align-items:flex-start; gap:20px;
    width:auto !important; margin:0 !important;
    padding:30px 26px !important;
    background: var(--mx-paper);
    border:1px solid var(--mx-line);
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-sm);
    transition: transform .5s var(--mx-ease-out), box-shadow .5s var(--mx-ease-out);
}
body .features-box:hover{ transform: translateY(-6px); box-shadow: var(--mx-shadow); }
body .features-box-icon{
    flex:0 0 auto; width:54px !important; height:54px !important;
    margin:0 !important; display:flex !important; align-items:center; justify-content:center;
    background: var(--mx-accent-soft) !important; border-radius: var(--mx-radius-lg) !important;
    transition: background-color .45s var(--mx-ease);
}
body .features-box:hover .features-box-icon{ background: var(--mx-accent) !important; }
body .features-box-icon-table, body .features-box-icon-table-ic{ display:contents !important; }
body .features-box-icon i{ font-size:22px !important; color: var(--mx-accent) !important; transition: color .45s var(--mx-ease); }
body .features-box:hover .features-box-icon i{ color:#fff !important; }
body .features-box-text{ flex:1; width:auto !important; }
body .features-box-text-head{
    font-family: var(--mx-font-display) !important;
    font-size:17px !important; font-weight:700 !important; letter-spacing:-.02em;
    margin-bottom:8px !important; color: var(--mx-ink) !important;
}
body .features-box-text-spot{
    font-family: var(--mx-font-body) !important;
    font-size:14px !important; line-height:1.7 !important; color: var(--mx-muted) !important;
}
body .ozellik-home-button-div{ text-align:left; max-width: var(--mx-container); margin:44px auto 0; padding:0 var(--mx-gutter); }

/* ==========================================================================
   17 — EKİP
   ========================================================================== */
body .ekip-home-main-div-inside{
    display:grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: clamp(18px,2.2vw,30px);
    text-align:left !important;
}
@media screen and (max-width:1023px){ body .ekip-home-main-div-inside{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media screen and (max-width:520px){ body .ekip-home-main-div-inside{ grid-template-columns:1fr; } }

body .ekip-box{
    width:auto !important; margin:0 !important; padding:0 0 28px !important;
    background: var(--mx-paper) !important;
    border:1px solid var(--mx-line);
    border-radius: var(--mx-radius-lg);
    overflow:hidden; text-align:left;
    transition: transform .5s var(--mx-ease-out), box-shadow .5s var(--mx-ease-out);
}
body .ekip-box:hover{ transform: translateY(-6px); box-shadow: var(--mx-shadow); }
body .ekip-box-img{ width:100% !important; height: clamp(260px,24vw,320px) !important; margin:0 0 22px !important; }
body .ekip-box-img img{ width:100% !important; height:100% !important; min-height:0 !important; object-fit:cover; filter: grayscale(100%); transition: transform .8s var(--mx-ease-out), filter .6s var(--mx-ease); }
body .ekip-box:hover .ekip-box-img img{ transform: scale(1.07); filter: grayscale(0%); }
body .ekip-box-name{
    font-family: var(--mx-font-display) !important; font-size:17px !important; font-weight:700 !important;
    letter-spacing:-.02em; color: var(--mx-ink) !important; padding:0 24px !important;
}
body .ekip-box-position{
    font-family: var(--mx-font-body) !important; font-size:12px !important;
    letter-spacing:.14em !important; text-transform:uppercase;
    color: var(--mx-accent) !important; margin:6px 0 16px !important; padding:0 24px !important;
}
body .ekip-box-mail-phone p{ font-size:13px !important; color: var(--mx-muted) !important; padding:0 24px !important; }
body .ekip-social-area{ padding:14px 24px 0 !important; }
body .ekip-social-area a{ color: var(--mx-muted) !important; margin-right:14px; font-size:15px; }
body .ekip-social-area a:hover{ color: var(--mx-accent) !important; }

/* ==========================================================================
   18 — BLOG
   ========================================================================== */
body .blog-home-main-div-inside{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(20px,2.4vw,34px);
    text-align:left !important;
}
@media screen and (max-width:1023px){ body .blog-home-main-div-inside{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media screen and (max-width:640px){ body .blog-home-main-div-inside{ grid-template-columns:1fr; } }

body .blog-box{
    width:auto !important; margin:0 !important; background:transparent !important;
    display:block !important; overflow:visible !important;
}
body .blog-box-in{ width:auto !important; margin:0 !important; }
body .blog-box-in > a:first-child{ display:block; overflow:hidden; border-radius: var(--mx-radius-lg); }
body .blog-box-in img{
    width:100% !important; height: clamp(210px,20vw,260px) !important;
    object-fit:cover; margin:0 0 22px !important; border-radius:0 !important;
    filter: grayscale(18%); transition: transform .9s var(--mx-ease-out), filter .6s var(--mx-ease);
}
body .blog-box:hover .blog-box-in img{ transform: scale(1.07); filter: grayscale(0%); }
body .blog-box-in-header{
    font-family: var(--mx-font-display) !important; font-size:19px !important; font-weight:700 !important;
    letter-spacing:-.025em; line-height:1.3 !important; margin-bottom:12px !important;
}
body .blog-box-in-header a{ color: var(--mx-ink) !important; }
body .blog-box:hover .blog-box-in-header a{ color: var(--mx-accent) !important; }
body .blog-box-in-spot{
    font-family: var(--mx-font-body) !important; font-size:14.5px !important;
    line-height:1.7 !important; color: var(--mx-muted) !important; margin-bottom:18px !important;
}
body .blog-box-in-readmore a{
    display:inline-flex; align-items:center; gap:10px;
    font-family: var(--mx-font-display) !important; font-size:12px !important; font-weight:700 !important;
    letter-spacing:.14em; text-transform:uppercase; color: var(--mx-ink) !important;
}
body .blog-box:hover .blog-box-in-readmore a{ margin-left:0 !important; color: var(--mx-accent) !important; }
body .blog-box-in-readmore a i{ margin-left:0 !important; transition: transform .4s var(--mx-ease); }
body .blog-box:hover .blog-box-in-readmore a i{ transform: translateX(6px); }

/* ==========================================================================
   19 — FOTOĞRAF GALERİSİ / VİDEO
   ========================================================================== */
body .photo-gallery-home-main-div{ display:grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap:2px; }
@media screen and (max-width:1023px){ body .photo-gallery-home-main-div{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media screen and (max-width:520px){ body .photo-gallery-home-main-div{ grid-template-columns:1fr; } }
body .photo-galleri-home-box{
    position:relative; width:auto !important; height: clamp(240px,22vw,320px) !important;
    margin:0 !important; border-radius:0 !important; overflow:hidden;
}
body .photo-galleri-home-box-img{
    width:100% !important; height:100% !important;
    min-width:0 !important; max-width:none !important; min-height:0 !important;
    object-fit:cover;
    filter: grayscale(30%); transition: transform 1s var(--mx-ease-out), filter .6s var(--mx-ease);
}
body .photo-galleri-home-box:hover .photo-galleri-home-box-img{ transform: scale(1.08) !important; }
body .photo-galleri-home-box:hover .photo-galleri-home-box-img{ transform: scale(1.08); filter: grayscale(0%); }
body .photo-overlay{
    position:absolute; inset:0; opacity:0;
    background: linear-gradient(to top, rgba(10,11,13,.88), rgba(10,11,13,.25));
    transition: opacity .5s var(--mx-ease);
}
body .photo-galleri-home-box:hover .photo-overlay{ opacity:1; }
body .photo-overlay-text{
    color:#fff !important; font-family: var(--mx-font-display) !important;
    font-size:15px !important; font-weight:700 !important; letter-spacing:.04em;
    transform: translateY(12px); transition: transform .55s var(--mx-ease-out);
}
body .photo-galleri-home-box:hover .photo-overlay-text{ transform: translateY(0); }
body .photo-overlay-text i{ color: var(--mx-accent); font-size:26px; margin-bottom:10px; display:inline-block; }

body .video-gallery-home-main-div-inside{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(18px,2.2vw,30px);
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    text-align:left !important;
}
@media screen and (max-width:1023px){ body .video-gallery-home-main-div-inside{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media screen and (max-width:640px){ body .video-gallery-home-main-div-inside{ grid-template-columns:1fr; } }
body .video-gallery-home-box{
    width:auto !important; margin:0 !important;
    background: var(--mx-paper) !important;
    border:1px solid var(--mx-line);
    border-radius: var(--mx-radius-lg); overflow:hidden;
    transition: transform .5s var(--mx-ease-out), box-shadow .5s var(--mx-ease-out);
}
body .video-gallery-home-box:hover{ transform: translateY(-6px); box-shadow: var(--mx-shadow); }
body .video-gallery-home-box-img{ width:100% !important; height: clamp(200px,20vw,250px) !important; }
body .video-gallery-home-box-img img{
    width:100% !important; height:100% !important;
    min-width:0 !important; max-width:none !important; min-height:0 !important;
    object-fit:cover; transition: transform .9s var(--mx-ease-out);
}
body .video-gallery-home-box:hover .video-gallery-home-box-img img{ transform: scale(1.07); }
body .video-gallery-home-box-overlay{
    width:100% !important; height: clamp(200px,20vw,250px) !important;
    background: rgba(10,11,13,.35) !important; transition: background-color .5s var(--mx-ease);
}
body .video-gallery-home-box:hover .video-gallery-home-box-overlay{ background: rgba(10,11,13,.66) !important; }
body .video-gallery-home-box-overlay-table{ width:100% !important; }
body .video-gallery-home-box-overlay-table-in{ height: clamp(200px,20vw,250px) !important; }
body .video-gallery-home-box-text{
    width:auto !important; margin:20px 24px 26px !important; text-align:left !important;
    font-family: var(--mx-font-display) !important; font-size:17px !important;
    letter-spacing:-.02em; line-height:1.3;
}

body .comments-box-inside{ width:auto !important; }
body .trigger-bottom-text-span i{ font-size:20px !important; margin:0 !important; }

/* ==========================================================================
   20 — REFERANSLAR / YORUMLAR
   ========================================================================== */
body .clients-box img{
    filter: grayscale(100%); opacity:.5;
    transition: filter .45s var(--mx-ease), opacity .45s var(--mx-ease), transform .45s var(--mx-ease);
}
body .clients-box:hover img{ filter: grayscale(0%); opacity:1; transform: scale(1.06); }

body .comment-box{ background:transparent !important; }
body .comments-box-inside{
    background: var(--mx-paper) !important;
    border:1px solid var(--mx-line) !important;
    border-radius: var(--mx-radius-lg) !important;
    padding:34px 30px !important;
    box-shadow: var(--mx-shadow-sm);
    transition: transform .5s var(--mx-ease-out), box-shadow .5s var(--mx-ease-out), border-color .4s var(--mx-ease);
}
body .comment-box:hover .comments-box-inside{ transform: translateY(-6px); box-shadow: var(--mx-shadow); border-color:transparent !important; }
body .comments-box-quote i, body .comments-box-quote{ color: var(--mx-accent) !important; }
body .comments-box-comment{
    font-family: var(--mx-font-body) !important;
    font-size:15px !important; line-height:1.8 !important; color: var(--mx-muted) !important;
}
body .comments-box-img img{ border-radius:50%; filter: grayscale(100%); transition: filter .45s var(--mx-ease); }
body .comment-box:hover .comments-box-img img{ filter: grayscale(0%); }
body .comments-box-name{
    font-family: var(--mx-font-display) !important; font-weight:700 !important;
    letter-spacing:-.02em; color: var(--mx-ink) !important;
}
body .comments-box-position{
    font-size:11.5px !important; letter-spacing:.14em !important; text-transform:uppercase;
    color: var(--mx-accent) !important;
}
body .comments-box-stars i{ color: var(--mx-accent) !important; }

/* ==========================================================================
   21 — SAYFA BAŞLIKLARI (iç sayfalar)
   ========================================================================== */
/* Not: burada bilerek `background` kısayolu KULLANILMAZ — böylece panelden
   yüklenen sayfa başlığı görseli (tip = 1) korunur, sadece rengi ve üzerine
   uygulanan koyu perde bizim kontrolümüzde olur. */
body .page-headers-main.page-headers-main{
    position:relative;
    width:100% !important; max-width:100% !important;
    padding: clamp(80px,9vw,150px) 0 clamp(52px,6vw,92px) !important;
    border:0 !important; box-shadow:none !important;
    background-color: var(--mx-ink) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow:hidden;
}
body .page-headers-main.page-headers-main::before{
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(1000px 420px at 12% 0%, rgba(224,27,25,.18), transparent 62%),
        linear-gradient(to right, rgba(9,10,12,.92) 0%, rgba(9,10,12,.74) 58%, rgba(9,10,12,.66) 100%);
    pointer-events:none;
}
body .page-headers-main-in{
    position:relative; z-index:2;
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    display:flex !important; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px;
}
body .page-headers-main-left{
    width:auto !important; display:block !important;
    font-family: var(--mx-font-display) !important;
    font-size: clamp(32px,4.6vw,62px) !important;
    font-weight:800 !important; letter-spacing:-.04em !important;
    line-height:1.02; color:#fff !important; text-align:left !important;
    position:relative; padding-top:26px;
}
body .page-headers-main-left::before{
    content:""; position:absolute; top:0; left:0; width:46px; height:3px; background: var(--mx-accent);
}
body .page-headers-main-right{
    width:auto !important; display:flex !important; align-items:center; flex-wrap:wrap;
    font-family: var(--mx-font-body) !important; font-size:12.5px !important;
    letter-spacing:.04em !important; text-align:right !important; padding-bottom:8px;
}
body .page-headers-main-right span,
body .page-headers-main-right a span{ color: var(--mx-muted-2) !important; padding-right:10px !important; }
body .page-headers-main-right a span{ color: rgba(255,255,255,.9) !important; font-weight:500 !important; }
body .page-headers-main-right a:hover span{ color: var(--mx-accent) !important; }

/* İç sayfa gövdesi ortak (tüm *-page-main / *-page-text-main / *-page-baslik kalıpları) */
body [class*="-page-main"]{ padding: var(--mx-section) 0 !important; }
body [class*="-page-text-main"]{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    text-align:left !important;
}
body [class*="-page-baslik"]{
    position:relative;
    font-family: var(--mx-font-display) !important;
    font-size: clamp(28px,3.6vw,46px) !important;
    font-weight:800 !important; letter-spacing:-.035em !important;
    line-height:1.08 !important; color: var(--mx-ink) !important;
    text-align:left !important; padding-top:24px !important; margin-bottom:18px !important;
}
body [class*="-page-baslik"]::before{
    content:""; position:absolute; top:0; left:0; width:46px; height:3px; background: var(--mx-accent);
}
/* Sayfa başlığı (breadcrumb bandı) bu kuralların dışında kalır */
body .page-headers-main[class*="-page-main"]{ padding: clamp(80px,9vw,150px) 0 clamp(52px,6vw,92px) !important; }

/* Detay sayfaları */
body [class*="-detail-header-baslik"]{
    font-family: var(--mx-font-display) !important;
    font-size: clamp(26px,3.2vw,42px) !important; font-weight:800 !important;
    letter-spacing:-.035em !important; line-height:1.1 !important;
    color: var(--mx-ink) !important; text-align:left !important;
}
body [class*="-detail-header-spot"]{
    font-family: var(--mx-font-body) !important; font-size:16px !important;
    line-height:1.8 !important; color: var(--mx-muted) !important; text-align:left !important;
}
body [class*="-detail-header-divider"]{ background-image:none !important; }
body .services-detail-content-left-img img,
body .proje-detail-ust-info img{ border-radius: var(--mx-radius-lg); }
body .proje-detail-ust-info-name{
    font-family: var(--mx-font-display) !important; font-size:11.5px !important; font-weight:700 !important;
    letter-spacing:.14em !important; text-transform:uppercase; color: var(--mx-accent) !important;
}
body .proje-detail-ust-info-spot{ font-family: var(--mx-font-body) !important; color: var(--mx-text) !important; }
body .page-spot-quote{
    font-family: var(--mx-font-body) !important;
    font-size: clamp(15px,1.25vw,17px) !important; font-weight:400 !important;
    line-height:1.8 !important; color: var(--mx-muted) !important;
    max-width:760px; text-align:left !important;
    border:0 !important; padding:0 !important; margin:0 0 clamp(34px,4vw,60px) !important;
}

/* İç sayfa içerik gridleri (metin tabanlı sayfalar hariç) */
body [class*="-page-content"]:not(.about-page-content):not(.htmlpages-page-content):not(.projects-page-content){
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(20px,2.4vw,34px);
    text-align:left !important; width:100% !important;
}
@media screen and (max-width:1023px){
    body [class*="-page-content"]:not(.about-page-content):not(.htmlpages-page-content):not(.projects-page-content){
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
@media screen and (max-width:640px){
    body [class*="-page-content"]:not(.about-page-content):not(.htmlpages-page-content):not(.projects-page-content){
        grid-template-columns:1fr;
    }
}
/* Projeler sayfası isotope kullandığı için blok düzende kalır */
body .projects-page-content{ display:block !important; text-align:left !important; }

/* Detay sayfası metin bloğu — okunabilir tipografi */
body .service-detail-text, body .project-detail-text, body .blog-detail-text,
body .htmlpages-text, body .about-page-text, body .detail-content-area{
    font-size:16.5px !important; line-height:1.85 !important; color: #3a3d44 !important;
    max-width: 820px;
}
body .service-detail-text h1, body .service-detail-text h2, body .service-detail-text h3,
body .project-detail-text h1, body .project-detail-text h2, body .project-detail-text h3,
body .blog-detail-text h1, body .blog-detail-text h2, body .blog-detail-text h3,
body .htmlpages-text h1, body .htmlpages-text h2, body .htmlpages-text h3{
    margin:1.6em 0 .6em !important; letter-spacing:-.03em;
}
body .service-detail-text img, body .project-detail-text img,
body .blog-detail-text img, body .htmlpages-text img{ border-radius: var(--mx-radius-lg); }
body .service-detail-text blockquote, body .blog-detail-text blockquote{
    border-left:3px solid var(--mx-accent); padding-left:22px; margin:26px 0;
    font-size:18px; font-style:normal; color: var(--mx-ink);
}

/* ==========================================================================
   22 — FORMLAR
   ========================================================================== */
body .form-group{ margin-bottom:18px; }
body .form-control{
    height:auto !important;
    padding:15px 18px !important;
    font-family: var(--mx-font-body) !important;
    font-size:14.5px !important;
    color: var(--mx-text) !important;
    background: var(--mx-paper) !important;
    border:1px solid var(--mx-line) !important;
    border-radius: var(--mx-radius) !important;
    box-shadow:none !important;
    transition: border-color .3s var(--mx-ease), box-shadow .3s var(--mx-ease), background-color .3s var(--mx-ease);
}
body textarea.form-control{ min-height:150px; }
body .form-control::placeholder{ color: var(--mx-muted-2) !important; }
body .form-control:focus{
    border-color: var(--mx-accent) !important;
    box-shadow: 0 0 0 3px var(--mx-accent-soft) !important;
    outline:none !important;
}
body label{
    font-family: var(--mx-font-display); font-size:11.5px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color: var(--mx-muted);
    margin-bottom:8px;
}
body .input-group-text{
    background: var(--mx-paper-2) !important;
    border:1px solid var(--mx-line) !important;
    border-radius: var(--mx-radius) !important;
    color: var(--mx-muted) !important;
}
body select.form-control{ appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236d7078'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important; background-position:right 14px center !important; padding-right:38px !important;
}
body .alert{
    border:0 !important; border-left:3px solid var(--mx-accent) !important;
    border-radius: var(--mx-radius) !important;
    background: var(--mx-paper-2) !important;
    font-family: var(--mx-font-body) !important; font-size:14px !important;
    padding:16px 20px !important; color: var(--mx-text) !important;
}
body .alert-success{ border-left-color:#12805a !important; }
body .alert-danger{ border-left-color: var(--mx-accent) !important; }

/* --- İLETİŞİM SAYFASI --- */
body .contact-page-main{
    width:100% !important; max-width:100% !important;
    margin:0 !important; padding:0 0 var(--mx-section) !important;
    background: var(--mx-paper) !important;
}
body .contact-page-maps-area,
body .contact-page-maps-area iframe{ height: clamp(320px, 44vh, 500px) !important; width:100% !important; }
body .contact-page-infos-area{
    width:100% !important;
    background: var(--mx-paper-2) !important;
    padding: clamp(48px,6vw,92px) 0 !important;
}
body .contact-page-infos-ust{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    display:flex !important; flex-wrap:wrap; gap: clamp(16px,2vw,26px);
    text-align:left !important; overflow:visible !important;
}
body .contact-page-infos-ust > .modules-header-main{ flex:0 0 100%; padding:0 !important; margin-bottom:8px !important; }
body .contact-page-icon-box{
    flex:1 1 220px; max-width:340px;
    width:auto !important; margin:0 !important;
    background: var(--mx-paper) !important;
    border:1px solid var(--mx-line) !important;
    border-radius: var(--mx-radius-lg) !important;
    padding:28px 26px !important;
    text-align:left !important;
    transition: transform .5s var(--mx-ease-out), box-shadow .5s var(--mx-ease-out);
}
body .contact-page-icon-box:hover{ transform: translateY(-5px); box-shadow: var(--mx-shadow); }
body .contact-page-icon-box-i{ font-size:20px !important; color: var(--mx-accent) !important; margin-bottom:14px !important; }
body .contact-page-icon-box-i i{ color: var(--mx-accent) !important; }
body .contact-page-icon-box-txt{
    font-family: var(--mx-font-body) !important; font-size:14.5px !important;
    line-height:1.7 !important; color: var(--mx-text) !important;
}
body .contact-page-infos-alt{
    width:100% !important; max-width: var(--mx-container) !important;
    height:auto !important; border:0 !important;
    margin:26px auto 0 !important; padding:0 var(--mx-gutter) !important;
    text-align:left !important;
}
body .contact-page-infos-alt-ic{ background:transparent !important; padding:0 !important; }
body .contact-page-infos-alt-ic a{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; margin:0 8px 0 0 !important;
    border:1px solid var(--mx-line); border-radius:50%;
    color: var(--mx-muted) !important; font-size:15px !important;
    transition: all .35s var(--mx-ease);
}
body .contact-page-infos-alt-ic a:hover{ background: var(--mx-accent); border-color: var(--mx-accent); color:#fff !important; transform: translateY(-3px); }
body .contact-page-infos-alt-ic a i{ padding:0 !important; }
body .contact-page-form-area{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important;
    padding: clamp(48px,6vw,92px) var(--mx-gutter) 0 !important;
}
body .contact-page-main iframe, body iframe[src*="google.com/maps"]{
    border-radius: var(--mx-radius-lg); filter: grayscale(100%) contrast(1.05);
    transition: filter .6s var(--mx-ease);
}
body .contact-page-main iframe:hover, body iframe[src*="google.com/maps"]:hover{ filter: grayscale(0%); }

/* ==========================================================================
   23 — SAYFALAMA / TABLO
   ========================================================================== */
body .pagination{ gap:6px; }
body .page-item .page-link{
    border:1px solid var(--mx-line) !important;
    border-radius: var(--mx-radius) !important;
    color: var(--mx-text) !important;
    font-family: var(--mx-font-display) !important; font-size:13px !important; font-weight:600;
    padding:10px 15px !important;
    transition: all .3s var(--mx-ease);
}
body .page-item .page-link:hover{ background: var(--mx-paper-2) !important; border-color: rgba(13,14,16,.3) !important; }
body .page-item.active .page-link{ background: var(--mx-ink) !important; border-color: var(--mx-ink) !important; color:#fff !important; }

body table{ font-family: var(--mx-font-body); }
body .table thead th{
    border:0 !important; border-bottom:1px solid var(--mx-line) !important;
    font-family: var(--mx-font-display); font-size:11.5px; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color: var(--mx-muted);
}
body .table td{ border-color: var(--mx-line) !important; vertical-align:middle; }

/* ==========================================================================
   24 — ÜRÜN / SEPET (hafif dokunuş)
   ========================================================================== */
body .product-main-box{
    background: var(--mx-paper) !important;
    border:1px solid var(--mx-line) !important;
    border-radius: var(--mx-radius-lg) !important;
    overflow:hidden;
    transition: transform .5s var(--mx-ease-out), box-shadow .5s var(--mx-ease-out);
}
body .product-main-box:hover{ transform: translateY(-6px); box-shadow: var(--mx-shadow); }
body .product-main-box-img img{ transition: transform .8s var(--mx-ease-out); }
body .product-main-box:hover .product-main-box-img img{ transform: scale(1.07); }
body .product-main-box-baslik{ font-family: var(--mx-font-display) !important; letter-spacing:-.02em; }
body .product-main-box-price{ font-family: var(--mx-font-display) !important; font-weight:800 !important; color: var(--mx-ink) !important; }
body .product-main-box-category{ font-size:11px !important; letter-spacing:.14em; text-transform:uppercase; color: var(--mx-accent) !important; }
body .step-num{ font-family: var(--mx-font-display) !important; }
body .step-num-active{ background: var(--mx-accent) !important; }
body .step-line-active{ background: var(--mx-accent) !important; }

/* ==========================================================================
   25 — FOOTER
   ========================================================================== */
body .footer-dark-ust-main{
    background: var(--mx-ink) !important;
    padding: clamp(64px,7vw,110px) 0 clamp(44px,5vw,70px) !important;
    border-top:1px solid rgba(255,255,255,.06);
}
body .footer-dark-ust-main-inside{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    display:grid !important;
    grid-template-columns: 1.6fr 1.1fr .9fr .9fr;
    gap: clamp(28px,3vw,52px);
    text-align:left !important;
}
@media screen and (max-width:1023px){ body .footer-dark-ust-main-inside{ grid-template-columns: 1fr 1fr; } }
@media screen and (max-width:560px){ body .footer-dark-ust-main-inside{ grid-template-columns: 1fr; } }

body .footer-dark-about-div,
body .footer-dark-contact-div,
body .footer-dark-links-div{ width:auto !important; margin:0 !important; text-align:left !important; }
body .footer-dark-logo{ margin-bottom:26px !important; }
body .footer-dark-logo img{ max-width:190px !important; max-height:64px !important; }
body .footer-dark-about-text{
    font-family: var(--mx-font-body) !important; font-size:14.5px !important;
    line-height:1.8 !important; color: var(--mx-muted-2) !important; margin-bottom:26px !important;
}
body .footer-dark-about-text a span{ color: var(--mx-accent) !important; }
body .footer-dark-about-text a:hover span{ color:#fff !important; }
body .footer-dark-social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin:0 8px 8px 0 !important;
    border:1px solid var(--mx-line-dark); border-radius:50%;
    color: var(--mx-muted-2) !important;
    transition: all .35s var(--mx-ease);
}
body .footer-dark-social a:hover{ background: var(--mx-accent); border-color: var(--mx-accent); color:#fff !important; transform: translateY(-3px); }
body .footer-dark-contact-div-box{
    font-family: var(--mx-font-body) !important; font-size:14px !important;
    color: var(--mx-muted-2) !important; margin-bottom:16px !important; line-height:1.65;
}
body .footer-dark-contact-div-box i{ color: var(--mx-accent) !important; font-size:14px !important; margin-top:5px !important; }
body .footer-dark-contact-div-box a{ color: var(--mx-muted-2) !important; }
body .footer-dark-contact-div-box a:hover{ color:#fff !important; }
body .footer-dark-links-div-header{
    font-family: var(--mx-font-display) !important; font-size:11.5px !important; font-weight:700 !important;
    letter-spacing:.18em !important; text-transform:uppercase;
    color:#fff !important; margin-bottom:22px !important; position:relative; padding-bottom:14px;
}
body .footer-dark-links-div-header::after{
    content:""; position:absolute; left:0; bottom:0; width:24px; height:2px; background: var(--mx-accent);
}
body .footer-dark-links-div-links{ margin-bottom:11px !important; }
body .footer-dark-links-div-links a{
    font-family: var(--mx-font-body) !important; font-size:14px !important;
    color: var(--mx-muted-2) !important; display:inline-block;
    transition: color .3s var(--mx-ease), transform .3s var(--mx-ease);
}
body .footer-dark-links-div-links a:hover{ color: var(--mx-accent) !important; transform: translateX(5px); }

body .mx-footer-more{ color: var(--mx-accent) !important; font-weight:600; }
body .footer-dark-about-text a:hover .mx-footer-more,
body a:hover > .mx-footer-more{ color:#fff !important; }

body .footer-dark-alt-main, body .footer-light-alt-main{
    background: var(--mx-ink-2) !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    padding:20px 0 !important;
}
body .footer-dark-alt-main-inside, body .footer-light-alt-main-inside{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    display:flex !important; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
    text-align:left !important;
}
body .footer-dark-alt-main-left, body .footer-dark-alt-main-right,
body .footer-light-alt-main-left, body .footer-light-alt-main-right{
    width:auto !important; display:block !important; text-align:left !important;
}
body .footer-dark-alt-main-left-copyright, body .footer-light-alt-main-left-copyright{
    font-family: var(--mx-font-display) !important;
    font-size:12.5px !important; font-weight:600 !important;
    letter-spacing:.04em; color: rgba(255,255,255,.9) !important;
}
body .footer-dark-alt-main-left-text, body .footer-light-alt-main-left-text{
    font-size:12.5px !important; color: var(--mx-muted) !important;
}
body .footer-dark-alt-main a, body .footer-light-alt-main a{ color: var(--mx-muted-2) !important; }
body .footer-dark-alt-main a:hover, body .footer-light-alt-main a:hover{ color: var(--mx-accent) !important; }

/* Açık tema footer varyantı da koyulaştırılır (tek bir görsel dil için) */
body .footer-light-ust-main{
    background: var(--mx-ink) !important;
    padding: clamp(64px,7vw,110px) 0 clamp(44px,5vw,70px) !important;
}
body .footer-light-ust-main-inside{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    display:grid !important;
    grid-template-columns: 1.6fr 1.1fr .9fr .9fr;
    gap: clamp(28px,3vw,52px);
    text-align:left !important;
}
@media screen and (max-width:1023px){ body .footer-light-ust-main-inside{ grid-template-columns:1fr 1fr; } }
@media screen and (max-width:560px){ body .footer-light-ust-main-inside{ grid-template-columns:1fr; } }
body .footer-light-about-div, body .footer-light-contact-div, body .footer-light-links-div{
    width:auto !important; margin:0 !important; text-align:left !important;
}
body .footer-light-about-text, body .footer-light-contact-div-box,
body .footer-light-links-div-links a{ color: var(--mx-muted-2) !important; font-size:14px !important; }
body .footer-light-links-div-links a:hover{ color: var(--mx-accent) !important; }
body .footer-light-links-div-header{
    font-family: var(--mx-font-display) !important; font-size:11.5px !important; font-weight:700 !important;
    letter-spacing:.18em !important; text-transform:uppercase; color:#fff !important;
    position:relative; padding-bottom:14px; margin-bottom:22px !important;
}
body .footer-light-links-div-header::after{
    content:""; position:absolute; left:0; bottom:0; width:24px; height:2px; background: var(--mx-accent);
}
body .footer-light-contact-div-box i{ color: var(--mx-accent) !important; }
body .footer-light-social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin:0 8px 8px 0 !important;
    border:1px solid var(--mx-line-dark); border-radius:50%;
    color: var(--mx-muted-2) !important; transition: all .35s var(--mx-ease);
}
body .footer-light-social a:hover{ background: var(--mx-accent); border-color: var(--mx-accent); color:#fff !important; transform: translateY(-3px); }
body .footer-light-logo img{ max-width:190px !important; max-height:64px !important; }

/* ==========================================================================
   26 — TETİKLEYİCİ BANTLAR (trigger top/bottom) & BÜLTEN
   ========================================================================== */
body .trigger-main-div.trigger-main-div{
    width:100% !important; max-width:100% !important;
    background: var(--mx-accent) !important;
    padding: clamp(36px,4.2vw,58px) 0 !important;
    position:relative; overflow:hidden;
}
body .trigger-main-div.trigger-main-div::before{
    content:""; position:absolute; right:-4%; top:-60%;
    width:420px; height:420px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 62%);
    pointer-events:none;
}
body .trigger-main-div-in{
    position:relative; z-index:2;
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
    display:flex !important; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
    text-align:left !important;
}
body .trigger-main-div-left,
body .trigger-main-div-right{ width:auto !important; display:block !important; }
body .trigger-main-div-left p{
    margin:0 !important;
    font-family: var(--mx-font-display) !important;
    font-size: clamp(20px,2.4vw,32px) !important; font-weight:700 !important;
    letter-spacing:-.025em !important; line-height:1.2 !important;
    color:#fff !important;
}
body .trigger-main-button{
    display:inline-flex; align-items:center; gap:10px;
    border:1px solid rgba(255,255,255,.7) !important;
    color:#fff !important; background:transparent;
    padding:15px 32px !important;
    font-family: var(--mx-font-display) !important;
    font-size:12.5px !important; font-weight:700 !important;
    letter-spacing:.11em; text-transform:uppercase;
    border-radius: var(--mx-radius);
    transition: background-color .4s var(--mx-ease), color .4s var(--mx-ease), border-color .4s var(--mx-ease), transform .4s var(--mx-ease);
}
body .trigger-main-button:hover{ background:#fff !important; color: var(--mx-accent) !important; border-color:#fff !important; transform: translateY(-2px); }

body .trigger-bottom-text-div{
    display:flex !important; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
    color:#fff !important;
    font-family: var(--mx-font-display) !important;
    font-size: clamp(16px,1.8vw,22px) !important; font-weight:600 !important;
    letter-spacing:-.015em;
}
body .trigger-bottom-text-span, body .trigger-bottom-phone-span{ display:inline-flex !important; align-items:center; }
body .trigger-bottom-phone-span a{ color:#fff !important; font-weight:800; letter-spacing:0; }
body .trigger-bottom-phone-span a:hover{ opacity:.82; }

body .bulten-home-main-div.bulten-home-main-div{
    background: var(--mx-ink-2) !important; padding: clamp(48px,5.5vw,84px) 0 !important;
}
body .bulten-home-main-div-inside{
    width:100% !important; max-width: var(--mx-container) !important;
    margin:0 auto !important; padding:0 var(--mx-gutter) !important;
}
body .bulten-home-box-baslik{
    font-family: var(--mx-font-display) !important;
    font-size: clamp(24px,3vw,38px) !important; font-weight:800 !important;
    letter-spacing:-.03em; color:#fff !important;
}
body .bulten-home-box-spot{ color: var(--mx-muted-2) !important; font-size:15px !important; }
body .bulten-input{
    background: rgba(255,255,255,.07) !important; border:1px solid var(--mx-line-dark) !important;
    color:#fff !important; padding:15px 18px !important; border-radius: var(--mx-radius) !important;
}
body .bulten-input::placeholder{ color: var(--mx-muted-2) !important; }
body .bulten-submit{
    background: var(--mx-accent) !important; border:0 !important; color:#fff !important;
    padding:15px 30px !important; border-radius: var(--mx-radius) !important;
    font-family: var(--mx-font-display) !important; font-size:12.5px !important; font-weight:700 !important;
    letter-spacing:.11em; text-transform:uppercase;
    transition: background-color .35s var(--mx-ease);
}
body .bulten-submit:hover{ background: var(--mx-ink) !important; }

/* ==========================================================================
   27 — YUKARI ÇIK / PRELOADER / ÇEREZ
   ========================================================================== */
/* "Yukarı çık" butonu kaldırıldı (panelde açık kalabilir, ekranda görünmez).
   Geri istenirse aşağıdaki satırı silmek yeterli. */
body #return-to-top{ display:none !important; }

body .preload-main{ background: var(--mx-ink) !important; }
body .preload-main .loader img{ max-width:150px; animation: mxPulse 1.6s var(--mx-ease) infinite; }
@keyframes mxPulse{ 0%,100%{ opacity:.35; transform: scale(.97);} 50%{ opacity:1; transform: scale(1);} }

body .cc-window{ font-family: var(--mx-font-body) !important; border-radius: var(--mx-radius-lg); }
body .cc-btn{ border-radius: var(--mx-radius) !important; font-family: var(--mx-font-display) !important; letter-spacing:.08em; text-transform:uppercase; font-size:12px !important; }

/* Alt kredi bandı */
body .mx-credit-bar{ background: var(--mx-ink) !important; padding:18px 12px !important; }
body .mx-credit-pill{
    background: rgba(255,255,255,.05) !important;
    border:1px solid var(--mx-line-dark);
    color: var(--mx-muted) !important;
    box-shadow:none !important;
    font-family: var(--mx-font-body) !important;
    font-size:12px !important;
    padding:9px 18px !important;
}
body .mx-credit-pill a{ color: var(--mx-muted) !important; }
body .mx-credit-pill a:hover{ color: var(--mx-accent) !important; }

/* Sabit iletişim butonları (whatsapp / telefon görselleri) */
body img[src*="whatsapp.png"], body img[src*="telefon.png"]{
    transition: transform .35s var(--mx-ease), filter .35s var(--mx-ease);
}
body img[src*="whatsapp.png"]:hover, body img[src*="telefon.png"]:hover{ transform: scale(1.08); }

/* ==========================================================================
   27b — GÖRSEL ÇERÇEVELERİ (paspartu / mat frame)
   Görselin etrafında ince beyaz bir boşluk + saç teli çizgi.
   Kalınlık/renk için :root içindeki --mx-frame ve --mx-frame-line yeterli.
   ========================================================================== */

/* --- Blog kartları --- */
body .blog-box-in > a:first-child{
    border: var(--mx-frame) solid var(--mx-paper);
    background: var(--mx-paper);
    box-shadow: 0 0 0 1px var(--mx-frame-line);
    border-radius: var(--mx-radius-lg);
    margin-bottom:22px;
    transition: box-shadow .5s var(--mx-ease-out);
}
body .blog-box:hover .blog-box-in > a:first-child{
    box-shadow: 0 0 0 1px rgba(13,14,16,.20), var(--mx-shadow);
}
body .blog-box-in img{ margin:0 !important; }

/* --- Hizmet kartı (görselli tip) --- */
body .service-image-box a:first-child,
body .service-image-box > img{
    border: var(--mx-frame) solid var(--mx-paper);
    background: var(--mx-paper);
    box-shadow: 0 0 0 1px var(--mx-frame-line);
    border-radius: var(--mx-radius-lg);
}

/* --- Ekip portreleri --- */
body .ekip-box-img{
    border: var(--mx-frame) solid var(--mx-paper) !important;
    background: var(--mx-paper) !important;
    box-shadow: 0 0 0 1px var(--mx-frame-line);
    border-radius: var(--mx-radius-lg);
    margin:0 0 22px !important;
}

/* --- Foto galeri (koyu zemin) — açık renkli ince halka --- */
body .photo-galleri-home-box{
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

/* --- Detay sayfaları ve içerik görselleri --- */
body .service-detail-text img,
body .project-detail-text img,
body .blog-detail-text img,
body .htmlpages-text img,
body .about-page-content img,
body .services-detail-content-left-img img,
body .proje-detail-ust-info img,
body [class*="-detail-content-left-img"] img{
    border: var(--mx-frame) solid var(--mx-paper);
    background: var(--mx-paper);
    box-shadow: 0 0 0 1px var(--mx-frame-line);
    border-radius: var(--mx-radius-lg);
    height:auto;
}

@media screen and (max-width:640px){
    :root{ --mx-frame: 7px; }
}

/* ==========================================================================
   28 — SCROLL REVEAL & HAREKET YARDIMCILARI
   ========================================================================== */
[data-mx-reveal]{
    opacity:0;
    transform: translate3d(0, 34px, 0);
    transition: opacity .85s var(--mx-ease-out), transform .95s var(--mx-ease-out);
    will-change: opacity, transform;
}
[data-mx-reveal="left"]{ transform: translate3d(-36px,0,0); }
[data-mx-reveal="right"]{ transform: translate3d(36px,0,0); }
[data-mx-reveal="scale"]{ transform: scale(.94); }
[data-mx-reveal="mask"]{ opacity:1; clip-path: inset(0 0 100% 0); transform:none; }
[data-mx-reveal].mx-in{ opacity:1; transform: translate3d(0,0,0) scale(1); clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce){
    [data-mx-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
    body .swiper-slide.swiper-slide-active::before{ animation:none !important; }
    body .swiper-slide-active .slider-section{ animation:none !important; }
}

/* jQuery appear tabanlı eski animasyonlar görünür kalsın */
body [data-appear-animation]{ opacity:1; }

/* Görsel maskeleme yardımcıları */
.mx-img-reveal{ overflow:hidden; display:block; }
.mx-img-reveal img{ transition: transform 1s var(--mx-ease-out); }

/* ==========================================================================
   29 — GENEL DÜZELTMELER
   ========================================================================== */
/* Eski tema float temizliği */
body .filter-project-grid::after{ content:""; display:block; clear:both; }

/* Eski divider görselleri kaldırıldı */
body .modules-header-main-head[style*="divider"]{ background-image:none !important; }

/* Sayfa içi geniş görseller */
body .proje-detail-ust-info-it{ font-family: var(--mx-font-body) !important; }

/* Lightbox / magnific arkaplan */
body .mfp-bg, body .lightboxOverlay{ background: rgba(9,10,12,.94) !important; opacity:1 !important; }

/* Arama kutusu (mobil) odak */
body input:focus, body textarea:focus, body select:focus, body button:focus{ outline:none; }

/* Tooltip */
body .tooltip-inner{
    background: var(--mx-ink) !important; border-radius: var(--mx-radius) !important;
    font-family: var(--mx-font-body) !important; font-size:12px !important; padding:7px 12px !important;
}

/* Çok küçük ekranlar */
@media screen and (max-width:420px){
    :root{ --mx-gutter: 18px; }
    body .btn{ padding:14px 22px; font-size:12px !important; }
}