@charset "UTF-8";
/*
* MEFAMEX WEBSITE (https://mefamex.com/) 
* Generated by Mefamex  
* Copyright 2024 Mefamex 
* Licensed under MIT (https://github.com/Mefamex/) 
* Created on  : 2024-12-08 
* Last update : 2025-09-03-T00:00:00Z
* Title : page_aside.css
* This css file is for the projects subpages of the Mefamex website.
*/

* {
    transition: all 0.1s ease;
}

body {
    background-color: rgb(20, 20, 20);
    color: white;
}

#main_container {
    display: flex;
    flex-flow: row wrap;
    height: fit-content;
    min-height: 85vh;
    width: 100%;
    color: white;
    /* Kompozit katmanlar için */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

#main_container>* {
    flex-grow: 1;
    flex-shrink: 1;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 2rem, 0) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2rem, 0) scale(0.98);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale(1);
    }
}

#main_container main>section.visible {
    -webkit-animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Tarayıcı uyumlulukları için */
@supports not (animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)) {
    #main_container main>section.visible {
        -webkit-animation: fadeInUp 0.4s ease-out forwards;
        animation: fadeInUp 0.4s ease-out forwards;
    }
}

#main_container main {
    display: flex;
    flex-flow: row wrap;
    color: white;
    flex-basis: 80%;
    flex-grow: 1000 !important;
    width: auto !important;
    max-width: 100%;
    margin-bottom: 5rem !important;
    align-content: flex-start;
    justify-content: space-evenly;
    height: fit-content;
    margin: 0;
    gap: 3rem 1rem;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#main_container main>section {
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: min(95vw, 100%);
    height: auto;
    background-color: rgb(5, 5, 5);
    margin: 1rem;
    padding: 1rem;
    justify-content: start;
    border: 0.1rem solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    transition: border-color 0.2s ease;
    box-shadow: -0.1rem -0.2rem 0.1rem rgba(255, 255, 255, 0.4), 0 0.5rem 0.5rem rgba(54, 54, 54, 0.4), 0 0.5rem 1rem rgba(0, 0, 0, 0.2);

    /* Performans optimizasyonları */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    /*contain: layout paint style;*/
    transform: translate3d(0, 0, 0);
    perspective: 1000px;
}

#main_container main>section:hover {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 -0.2rem 0.1rem rgba(255, 255, 255, 0.5), 0 0.5rem 0.5rem rgba(54, 54, 54, 0.5), 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

#main_container main #mainWellcome {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    min-height: 15rem;
    margin-bottom: 2rem;
    margin-inline: 5%;
}

#main_container main #mainWellcome h1 {
    text-align: center;
    margin-block: 0.3rem;
    font-size: 2.3em;
}

#main_container main #mainWellcome p {
    line-height: 1.4;
    margin-block: 0.5em;
}

#main_container main #mainWellcome p::before {
    content: " ■ ";
    color: rgb(123, 255, 255);
}

/*
*
*
*
*
*
*
*/


@media only screen and (max-width: 600px) {
    body {
        font-size: 0.75rem;
    }
}

@supports (container-type: inline-size) {
    #main_container {
        container-type: inline-size;
        container-name: main;
    }
}


/*
*
*
*
*
*
*
*
*/
.noSelect {
    /* ana dizin css dosyasından alındı */
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#main_container pre[class*=language-].line-numbers {
    padding-left: 2.8em !important;
}

#main_container pre[class*=language-] {
    margin: 0 !important;
    font-size: 0.85em !important;
    width: fit-content;
    max-width: min(100%, 95vw);
}

#main_container code[class*=language-], pre[class*=language-] {
    line-height: 1.25 !important;
    font-size: 0.9em !important;
}

#main_container code[class*=language-]:not(pre code[class*=language-]) {
    border: 0.1em solid rgba(245, 222, 179, 0.377);
    padding-inline: 0.5em;
}

#main_container a {
    color: inherit;
    text-decoration-color: rgba(255, 50, 50, 0.7);
}

#main_container hr {
    width: 100%;
    height: 0.1em;
}

#main_container ol {
    margin: 0;
    padding: 0 0 0 1.5rem;
}

#main_container ul {
    margin: 0;
    padding: 0 0 0 1em;

    li {
        margin-block: 0.5em;
    }
}

#main_container p {
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

#main_container section.section_full {
    flex-basis: 95% !important;
    width: 100% !important;
    margin-inline: auto;
}

#main_container section.compacts {
    /* sectionlar için, divleri bölmeler*/
    display: flex;
    flex-flow: row wrap !important;
    flex-basis: 80% !important;
    gap: 3em 1.5em;
    margin-block: 3em !important;
}

#main_container section.compacts>div {
    max-width: min(100%, 95vw);
    flex: 1 1 30em;
    display: flex;
    flex-direction: column;
    /*border*/
    border: 0.1rem solid rgba(255, 255, 255, 0.3);
    border-radius: 2em;
    padding: 0.5em 0.5em 1em 0.5em;
}

#main_container h2 {
    width: fit-content;
    padding: 0.5rem 1rem;
    margin-inline: auto;
    margin-block: 0.5rem;
    font-size: 1.6em;
    text-align: center;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.4);
}

#main_container h3 {
    width: fit-content;
    padding: 0.5rem 1rem;
    margin-block: 0.3rem;
    font-size: 1.4em;
    margin-block: 0.3rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.2rem rgba(255, 255, 255, 0.4);
}

#main_container details {
    margin-block-end: 1em;
    padding: 0rem 0.3em;
    border-radius: 0.6em;
    border: 0.1em solid rgba(13, 109, 253, 0.631);
    border-left: 0.3em solid rgb(13, 110, 253);
    list-style-type: none;
}

#main_container summary {
    cursor: pointer;
    padding: 0.5rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    margin: 0;
    list-style-type: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#main_container summary:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}