/* https://www.erbilen.net/css-flex-ile-ilgili-her-sey/ */
/* https://codepen.io/tayfunerbilen/pen/zYOQBWR */


.liquidWrapCss {

    font-size: 20px;

    .liq-container-orjinal {

        /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        border: 5px solid #111;
        border-radius: 0 16px 16px 16px;
        padding: 16px 8px 0;
        margin-bottom: 50px; */
        
        /* position: relative; */

        .liq-item {
            /* bana fazla yaklaşılmasın */
            padding: .5%; 
            /* data bu kadar uzak duracak */

            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;


            /* ŞİMDİLİK FAZLA GİBİ GELDİ BANA        */
            display: flex;


            /* align-items: center; */
            /* justify-content: center; */
            /* text-align: center; */
            


            /* flex-direction: row; */

            /* DEFAULT umuz */
            /* flex-direction: column; */
            
            /* flex-direction: column-reverse; */
            /* flex-direction: row-reverse; */

            /* justify-content: start; */
            /* justify-content: center; */
            justify-content: space-around;
            /* justify-content: space-evenly; */
            /* justify-content: space-between; */

        }
        &.flex {

            display: flex;

            &.liq-wrap { flex-wrap: wrap; }
            
            &.liq-wrap-reverse { flex-wrap: wrap-reverse; }
            
        }
    }

    /* liq-container-orjinal AÇIK hali https://chat.openai.com/share/59e69b22-6e50-44aa-a9bc-d8d8d0d6516b */
    .liq-container .liq-item {
        /* bana fazla yaklaşılmasın */
        padding: .5%;  /* Min .0% de olabilir */
        /* data bu kadar uzak duracak */

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;


        /* ŞİMDİLİK FAZLA GİBİ GELDİ BANA        */
        display: flex;


        /* align-items: center; */
        /* justify-content: center; */
        /* text-align: center; */
        


        /* flex-direction: row; */

        /* DEFAULT umuz */
        /* flex-direction: column; */
        
        /* flex-direction: column-reverse; */
        /* flex-direction: row-reverse; */

        /* justify-content: start; */
        /* justify-content: center; */
        justify-content: space-around;
        /* justify-content: space-evenly; */
        /* justify-content: space-between; */
    }

    .liq-container.flex {
        display: flex;
    }

    .liq-container.flex.liq-wrap {
        flex-wrap: wrap;
    }

    .liq-container.flex.liq-wrap-reverse {
        flex-wrap: wrap-reverse;
    }
    /* liq-container-orjinal AÇIK hali */



    #bizkimiz, #sektorler {
        @media screen and (min-width:   0px) and (max-width:  275px) {
            .percentWidth { width: 100%;      max-width: 100%; }
            .liq-item, .flex{
                flex-direction: column; 
                width: 100%;       
                /* max-width: 100%;  */
            }
        }
        @media screen and (min-width: 275px) and (max-width:  550px) {
            .percentWidth { width: 100%;       max-width: 100%; }
            .liq-item, .flex{
                flex-direction: column; 
                width: 100%;       
                /* max-width: 100%;  */
            }
        }
        @media screen and (min-width: 550px) and (max-width:  825px) {
            /* background-color: bisque; */
            .percentWidth { width: 100%;  max-width: 100%; }
            /* .w25{max-width:100%}
            .w75{max-width:100%} */
            
            .liq-item, .flex{
                flex-direction: column; 
                width: 100%;       
                /* max-width: 100%;  */
            }
        }
        @media screen and (min-width: 825px) and (max-width: 1100px) {
            .percentWidth { width: 100%;       max-width: 100%; }
            .liq-item, .flex{
                flex-direction: row; 
                width: 100%;       
                /* max-width: 100%;  */
            }
        }
    }


    #bolgeSertifikalar {
            @media screen and (min-width:   0px) and (max-width:  275px) {
                .percentWidth { width: 100%;      max-width: 100%; }
                .liq-item, .flex{
                    flex-direction: column; 
                    width: 100%;       
                    /* max-width: 100%;  */
                }
            }
            @media screen and (min-width: 275px) and (max-width:  550px) {
                .percentWidth { width: 100%;       max-width: 100%; }
                .liq-item, .flex{
                    flex-direction: column; 
                    width: 100%;       
                    /* max-width: 100%;  */
                }
            }
            @media screen and (min-width: 550px) and (max-width:  825px) {
                .percentWidth { width: 100%;  max-width: 100%; }
                .liq-item, .flex{
                    flex-direction: column; 
                    width: 100%;       
                    /* max-width: 100%;  */
                }
            }
            @media screen and (min-width: 825px) and (max-width: 1100px) {
                .percentWidth { width: 100%;       max-width: 100%; }
                .liq-item, .flex{
                    flex-direction: row; 
                    width: 100%;       
                    /* max-width: 100%;  */
                }
            }
    }


    #bolge1 {
        /*     min-width   and   max-width   */
        /*     ---------   ---   ---------   */
        /*         0      +275=    275       */
        /*       275      +275=    550       */
        /*       550      +275=    825       */
        /*       825      +275=    1100      */
        /*     ---------   ---   ---------   */
        @media screen and (min-width:   0px) and (max-width:  275px) {.percentWidth { width: 100%;      max-width: 100%; }}
        @media screen and (min-width: 275px) and (max-width:  550px) {.percentWidth { width: 50%;       max-width: 50%; }}
        @media screen and (min-width: 550px) and (max-width:  825px) {.percentWidth { width: 33.3333%;  max-width: 33.3333%; }}
        @media screen and (min-width: 825px) and (max-width: 1100px) {.percentWidth { width: 25%;       max-width: 25%; }}
    }



    /* fixSCRwidth:1100px   */
    /* fixIMGwidth:275px   */
    /* fixSCRwidth - fixIMGwidth = 1st min-width */
    /* 1st min-width - fixIMGwidth = 2st min-width */
    /* 2st min-width - fixIMGwidth = 3st min-width */
    /* 3st min-width - fixIMGwidth = 4st min-width */
    #bolge2 {
        /* @media screen and (max-width: 1100px) and (min-width: 825px) {.percentWidth { width: 25%; max-width: 25%; }} */
        @media screen and (max-width: 825px) and (min-width: 550px) {.percentWidth { width: 33.3333%; max-width: 33.3333%; }}
        @media screen and (max-width: 550px) and (min-width: 275px) {.percentWidth { width: 50%; max-width: 50%; }}
        @media screen and (max-width: 275px) and (min-width:   0px) {.percentWidth { width: 100%; max-width: 100%; }}
    }

/* ==================================== liquidWrap ================================================ */






/* ======================================== flexyCss ======================================== */

/* 
https://www.geeksforgeeks.org/why-would-you-use-flexbox-instead-of-floats/ 
https://css-tricks.com/books/greatest-css-tricks/flexible-grids/ 
*/

/* .flexyCss { */

    .w20, .pw20start { 
        width: 20%; 
        /* ! OLMAYACAK max-width: 20%; */
        max-width: 20%;
        /* margin:0px; padding:0px; */
    
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
      .w25, .pw25start { 
        width: 25%; 
        /* ! OLMAYACAK max-width: 25%; */
        max-width: 25%;
        /* margin:0px; padding:0px; */
    
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
      .w33, .pw33start { 
        width: 33.3333%; 
        /* ! OLMAYACAK max-width: 33.3333%; */
        max-width: 33.3333%;
        /* margin:0px; padding:0px; */
    
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
      .w50, .pw50start { 
        width: 50%; 
        /* ! OLMAYACAK max-width: 50%; */
        max-width: 50%;
        /* margin:0px; padding:0px; */
    
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
      .w75, .pw75start { 
        width: 75%; 
        /* ! OLMAYACAK max-width: 75%; */
        max-width: 75%;
        /* margin:0px; padding:0px; */
    
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
      .w100, .pw100start { 
        width: 100%; 
        /* ! OLMAYACAK max-width: 100%; */
        max-width: 100%;
        /* margin:0px; padding:0px; */
    
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
    
        /* 
    |------------------|-----------------|------------------|-----------------|------------------|  212px wCol4  -   w20
    |-----------------------|----------------------|----------------------|----------------------|  265px wCol5  -   w25
    |-------------------------------|----------------------------|-------------------------------|  353px wCol3  -   w33
    |----------------------------------------------|---------------------------------------------|  530px wCol2  -   w50
    |--------------------------------------------------------------------------------------------| 1060px wCol1  -   w100
        */
    
    
      .wCol5 {
        width: 212px; 
        max-width: 212px; 
        /* margin:0px; padding:0px; */
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
      
      .wCol4 {
        width: 265px; 
        max-width: 265px; 
        /* margin:0px; padding:0px; */
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
    
      .wCol3 {
        width: 353.3333px; 
        max-width: 353.3333px; 
        /* margin:0px; padding:0px; */
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
    
      .wCol2 {
        width: 530px; 
        max-width: 530px; 
        /* margin:0px; padding:0px; */
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
    
      .wCol1 {
        width: 1060px;
        max-width: 1060px; 
        /* margin:0px; padding:0px; */
        /* data bu kadar uzak duracak */
        /* padding: .5%;  */
      }
      
    
      ul {
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
      }
    
      li {
        display: list-item;
        text-align: -webkit-match-parent;
      }
    
      /* https://chat.openai.com/share/9993e482-92f0-423b-9944-3264deb1685d */
    
      ul li {
        margin: 20px 20px 20px 20px;
      }
    
      .aciklama p {
        margin: 6px 0px 6px 0px;
        font-size: 120%;
      }
    
    
    
      /* https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries */
      /* https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
      /* https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile */
    
    
      .kutu {
    
        /* margin: 1%;
        padding: 1%; */
    
        /* margin: 3px; */
        /* padding: 3px; */
    
        border: 3px solid #efefef;
        border-radius: 5px;
    
      }
    
    /* } */
    
      

}