.elementor-2956 .elementor-element.elementor-element-e84f87f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2956 .elementor-element.elementor-element-394ae7ac{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:0em;--padding-bottom:3em;--padding-left:0em;--padding-right:0em;}.elementor-2956 .elementor-element.elementor-element-394ae7ac:not(.elementor-motion-effects-element-type-background), .elementor-2956 .elementor-element.elementor-element-394ae7ac > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-2956 .elementor-element.elementor-element-7c4cb4c8{--display:flex;--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}.elementor-2956 .elementor-element.elementor-element-18c1f4cf{text-align:start;color:#121213;}.elementor-2956 .elementor-element.elementor-element-14c2eb26{--display:flex;--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}@media(max-width:1024px){.elementor-2956 .elementor-element.elementor-element-394ae7ac{--padding-top:2em;--padding-bottom:2em;--padding-left:0em;--padding-right:0em;}.elementor-2956 .elementor-element.elementor-element-7c4cb4c8{--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}.elementor-2956 .elementor-element.elementor-element-14c2eb26{--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}}@media(max-width:767px){.elementor-2956 .elementor-element.elementor-element-394ae7ac{--padding-top:1em;--padding-bottom:1em;--padding-left:0em;--padding-right:0em;}.elementor-2956 .elementor-element.elementor-element-7c4cb4c8{--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-2956 .elementor-element.elementor-element-14c2eb26{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}}@media(min-width:768px){.elementor-2956 .elementor-element.elementor-element-7c4cb4c8{--width:70%;}.elementor-2956 .elementor-element.elementor-element-14c2eb26{--width:30%;}}@media(max-width:1024px) and (min-width:768px){.elementor-2956 .elementor-element.elementor-element-7c4cb4c8{--width:100%;}.elementor-2956 .elementor-element.elementor-element-14c2eb26{--width:100%;}}/* Start custom CSS for theme-post-content, class: .elementor-element-18c1f4cf *//* ==========================================================
   MOTTOCUP BLOG CONTENT HEADINGS
   H1'e dokunmaz, yalnızca içerik içindeki H2-H5
========================================================== */

.motto-blog-content {

    --mbc-orange: #e67d20;
    --mbc-orange-soft: #fff4ea;

    --mbc-brown: #4b3022;
    --mbc-dark: #302823;

    --mbc-text: #5f5853;
    --mbc-border: #e8dfd8;
}


/* ==========================================================
   TÜM İÇERİK BAŞLIKLARI
========================================================== */

.motto-blog-content h2,
.motto-blog-content h3,
.motto-blog-content h4,
.motto-blog-content h5 {

    color: var(--mbc-dark);

    font-weight: 600;

    letter-spacing: -.025em;

    scroll-margin-top: 125px;
}


/* ==========================================================
   H2
   Makalenin ana bölüm başlıkları
========================================================== */

.motto-blog-content h2 {

    position: relative;

    margin:
        48px
        0
        20px !important;

    padding:
        0
        0
        14px
        20px;

    border-bottom:
        1px solid var(--mbc-border);

    font-size:
        clamp(28px, 2.5vw, 36px) !important;

    line-height:
        1.2 !important;

    letter-spacing:
        -.032em;
}


/* Sol turuncu vurgu */

.motto-blog-content h2::before {

    content: "";

    position: absolute;

    left: 0;
    top: .16em;

    width: 4px;
    height: calc(100% - .45em);

    max-height: 45px;

    border-radius: 5px;

    background:
        var(--mbc-orange);
}


/* Alt bölümde küçük turuncu çizgi */

.motto-blog-content h2::after {

    content: "";

    position: absolute;

    left: 20px;
    bottom: -1px;

    width: 48px;
    height: 2px;

    border-radius: 2px;

    background:
        var(--mbc-orange);
}


/* ==========================================================
   H3
   H2 altındaki alt konular
========================================================== */

.motto-blog-content h3 {

    position: relative;

    margin:
        34px
        0
        15px !important;

    padding-left: 17px;

    font-size:
        clamp(22px, 1.9vw, 27px) !important;

    line-height:
        1.28 !important;
}


/* Turuncu kısa çizgi */

.motto-blog-content h3::before {

    content: "";

    position: absolute;

    left: 0;
    top: .62em;

    width: 8px;
    height: 3px;

    border-radius: 3px;

    background:
        var(--mbc-orange);
}


/* ==========================================================
   H4
========================================================== */

.motto-blog-content h4 {

    margin:
        27px
        0
        12px !important;

    font-size:
        19px !important;

    line-height:
        1.35 !important;

    color:
        var(--mbc-brown);
}


/* ==========================================================
   H5
========================================================== */

.motto-blog-content h5 {

    margin:
        23px
        0
        10px !important;

    font-size:
        16px !important;

    line-height:
        1.4 !important;

    color:
        var(--mbc-brown);
}


/* ==========================================================
   HEADING SONRASI PARAGRAF
   Başlıkla metin arasındaki mesafeyi düzenler
========================================================== */

.motto-blog-content h2 + p,
.motto-blog-content h3 + p,
.motto-blog-content h4 + p {

    margin-top: 0 !important;
}


/* ==========================================================
   HEADING İÇİNDE LINK VARSA
========================================================== */

.motto-blog-content h2 a,
.motto-blog-content h3 a,
.motto-blog-content h4 a {

    color: inherit !important;

    text-decoration: none !important;
}


.motto-blog-content h2 a:hover,
.motto-blog-content h3 a:hover,
.motto-blog-content h4 a:hover {

    color: var(--mbc-orange) !important;
}


/* ==========================================================
   ANCHOR HEADING
   İçindekiler tablosundan gidildiğinde hafif vurgu
========================================================== */

.motto-blog-content h2:target,
.motto-blog-content h3:target {

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            var(--mbc-orange-soft),
            transparent 75%
        );
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .motto-blog-content h2 {

        margin-top:
            42px !important;

        padding-left:
            18px;

        font-size:
            30px !important;
    }


    .motto-blog-content h2::after {

        left: 18px;
    }


    .motto-blog-content h3 {

        margin-top:
            30px !important;

        font-size:
            23px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .motto-blog-content h2 {

        margin:
            37px
            0
            17px !important;

        padding:
            0
            0
            12px
            15px;

        font-size:
            26px !important;

        line-height:
            1.22 !important;
    }


    .motto-blog-content h2::before {

        width:
            3px;
    }


    .motto-blog-content h2::after {

        left:
            15px;

        width:
            39px;
    }


    .motto-blog-content h3 {

        margin:
            27px
            0
            13px !important;

        padding-left:
            14px;

        font-size:
            21px !important;
    }


    .motto-blog-content h3::before {

        width:
            7px;
    }


    .motto-blog-content h4 {

        margin-top:
            23px !important;

        font-size:
            17px !important;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 430px) {

    .motto-blog-content h2 {

        font-size:
            24px !important;
    }


    .motto-blog-content h3 {

        font-size:
            19px !important;
    }

}

/* ==========================================================
   MOTTOCUP BLOG CONTENT LINKS
========================================================== */

.motto-blog-content {

    --mbc-orange: #e67d20;
    --mbc-orange-dark: #c96512;
    --mbc-orange-soft: rgba(230,125,32,.10);
}


/* ==========================================================
   NORMAL CONTENT LINKS
========================================================== */

.motto-blog-content p a,
.motto-blog-content li a,
.motto-blog-content blockquote a,
.motto-blog-content td a,
.motto-blog-content th a {

    color: var(--mbc-orange) !important;

    font-weight: 500;

    text-decoration: underline;

    text-decoration-color: rgba(230,125,32,.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition:
        color .18s ease,
        text-decoration-color .18s ease,
        background .18s ease;
}


/* ==========================================================
   HOVER
========================================================== */

.motto-blog-content p a:hover,
.motto-blog-content li a:hover,
.motto-blog-content blockquote a:hover,
.motto-blog-content td a:hover,
.motto-blog-content th a:hover {

    color: var(--mbc-orange-dark) !important;

    text-decoration-color: var(--mbc-orange);

    background:
        linear-gradient(
            180deg,
            transparent 62%,
            var(--mbc-orange-soft) 62%
        );
}


/* ==========================================================
   VISITED
   Ziyaret edilmiş linkler mora dönmesin
========================================================== */

.motto-blog-content p a:visited,
.motto-blog-content li a:visited,
.motto-blog-content blockquote a:visited,
.motto-blog-content td a:visited,
.motto-blog-content th a:visited {

    color: var(--mbc-orange) !important;
}


/* ==========================================================
   FOCUS
========================================================== */

.motto-blog-content p a:focus-visible,
.motto-blog-content li a:focus-visible,
.motto-blog-content blockquote a:focus-visible,
.motto-blog-content td a:focus-visible,
.motto-blog-content th a:focus-visible {

    outline: 2px solid rgba(230,125,32,.45);

    outline-offset: 3px;

    border-radius: 2px;
}


/* ==========================================================
   HEADING LINKS
   Heading tasarımını ayrı tutuyoruz
========================================================== */

.motto-blog-content h2 a,
.motto-blog-content h3 a,
.motto-blog-content h4 a,
.motto-blog-content h5 a {

    color: inherit !important;

    text-decoration: none !important;

    background: none !important;
}


/* Heading hover */

.motto-blog-content h2 a:hover,
.motto-blog-content h3 a:hover,
.motto-blog-content h4 a:hover,
.motto-blog-content h5 a:hover {

    color: var(--mbc-orange) !important;
}


/* ==========================================================
   IMAGE LINKS
   Görsel linklerinde turuncu underline oluşmasın
========================================================== */

.motto-blog-content a:has(img) {

    text-decoration: none !important;

    background: none !important;
}/* End custom CSS */