:root {
    --max-width-text: 640px;
    --max-width-block: 1400px;
  }

  
  
  
  
  .conponentStickyLeft {
    position: sticky;
    top: 80px;
    flex: 1;
    border-right: 1px solid #ccc;
    padding-right: 10px;
    margin-right: 10px;
    display: none;
  }
  .conponentStickyRight {
    position: sticky;
    top: 80px;
    flex: 1;
    border-left: 1px solid #ccc;
    padding-left: 10px;
    margin-left: 10px;
    display: none;
  }
  
  .conponentLeft {
    /* flex: 1; */
  }
  .conponentCenter {
   width: 100%;
  }
  .conponentRight {
    /* flex: 1; */
  }
  .conponentLeft img {
    display: block;
  }
  .conponentCenter img {
    display: block;
  }
  .conponentRight img {
    display: block;
  }
  
  .component15 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
  
    flex-direction: column;
    position: unset;
    /* position:relative;  */
  }
  .component16 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .component17 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .component18 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .component19 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .component20 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .component21 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .component22 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .component23 {
    display: flex;
    width: 100%;
    margin: 0px auto;
    max-width: var(--max-width-block);
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .component1,
  .component2 {
    display: flex;
    width: 100%;
    max-width: 860px;
    margin: 0px auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
  }
  .component1 h1,
  .component1 h2,
  .component1 h3,
  .component1 h4 {
    font-size: 1.1em;
    margin: 0px auto;
  }
  .component1 p {
    font-size: 0.7em;
    margin: 10px auto;
  }
  .component2 h1,
  .component2 h2,
  .component2 h3,
  .component2 h4 {
    font-size: 1.1em;
    margin: 0px auto;
  }
  .component2 p {
    font-size: 0.7em;
    margin: 10px auto;
  }
  
  .component3 {
    margin-bottom: 10px;
  }
  .component4 {
    display: flex;
    width: 100%;
    max-width: var(--max-width-text);
    margin: 0px auto;
    align-items: center;
    justify-content: center;
  }
  .component5 {
    display: flex;
    width: 100%;
    max-width: var(--max-width-text);
    margin: 0px auto;
    align-items: center;
    justify-content: center;
  }
  
  .wid50 {
    width: 100%;
    display: inline-block;
  }
  .wid33 {
    width: 100%;
    display: inline-block;
  }
  .wid25 {
    width: 100%;
    display: inline-block;
  }
  .component6 {
    display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: var(--max-width-text);
    align-items: flex-start;
    justify-content: flex-start;
    /* gap: 30px; */
  }
  .tekParam {
    display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: var(--max-width-text);
    align-items: flex-start;
    justify-content: flex-start;
    /* gap: 30px; */
  }
  .component6a {
    display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: var(--max-width-text);
    align-items: flex-start;
    justify-content: flex-start;
    /* gap: 30px; */
  }
  .component6b {
    display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: var(--max-width-text);
    align-items: flex-start;
    justify-content: flex-start;
    /* gap: 30px; */
  }
  .component6c {
    display: flex;
    margin: 0 auto;
    width: 100%;
    max-width: var(--max-width-text);
    align-items: flex-start;
    justify-content: flex-start;
    /* gap: 30px; */
  }
  .imgandtextblock1 {
    display: flex;
    width: 100%;
    flex-direction: column-reverse;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    /* background-color:rgb(111, 197, 243); */
    /* padding: 10px; */
  }
  
  .imgandtextblock2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    /* background-color:rgb(203, 243, 111); */
    /* padding: 10px; */
  }
  .column2 {
    flex-direction: column;
  }
  .column3 {
    flex-direction: column;
  }
  .column4 {
    flex-direction: column;
  }
  .column-reverse {
    flex-direction: column-reverse;
  }
  .column2 img,
  .column3 img {
    width: 100%;
  }
  .column-reverse img {
    width: 100%;
  }
  
  @media screen and (min-width: 375px) {
    /* .component1,.component15,.component16,.component17,.component18, .component19, .component20, .component21, .component22, .component23{
      flex-direction: row;
    } */
    .component1,
    .component2 {
      padding: 30px;
    }
    .component1 h1,
    .component1 h2,
    .component1 h3,
    .component1 h4 {
      font-size: 2em;
    }
    .component1 p {
      font-size: 1.5em;
    }
    .component2 h1,
    .component2 h2,
    .component2 h3,
    .component2 h4 {
      font-size: 2em;
    }
    .component2 p {
      font-size: 1.5em;
    }
    .component6,
    .tekParam,
    .component6a,
    .component6b,
    .component6c {
      flex-direction: row;
      gap: 30px;
    }
    .conponentStickyLeft {
      display: block;
      padding: 0px 10px;
    }
    .conponentStickyRight {
      display: block;
      padding: 0px 10px;
    }
    .conponentLeft {
      flex: 1;
      border-right: 1px solid transparent;
      padding: 0px 10px;
      margin-right: 10px;
    }
    .conponentCenter {
      max-width: var(--max-width-text);
      width: 100%;
      /* flex: 4; */
    }
    .conponentRight {
      flex: 1;
      border-left: 1px solid transparent;
      padding: 0px 10px;
      margin-left: 10px;
    }
    .column {
      flex-direction: row;
    }
    .column2 {
      flex-direction: row;
    }
    .column3 {
      flex-direction: row;
    }
    .column4 {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .column-reverse {
      flex-direction: row;
    }
    .column2 img {
      width: 50%;
    }
    .column-reverse img {
      width: 50%;
    }
    .wid50 {
      width: 50%;
    }
    .wid33 {
      width: 33.33%;
    }
    .wid25 {
      width: calc(50% - 15px);
    }
    .wid50 img {
      width: 100%;
    }
    .wid33 img {
      width: 100%;
    }
    .wid25 img {
      width: 100%;
    }
    .imgandtextblock1 h1,
    .imgandtextblock1 h2,
    .imgandtextblock1 h3 {
      font-size: 1.8em;
      margin-bottom: 10px;
    }
    .imgandtextblock1 p {
      font-size: 1.3em;
    }
    .imgandtextblock2 h1,
    .imgandtextblock2 h2,
    .imgandtextblock2 h3 {
      font-size: 1.8em;
      margin-bottom: 10px;
    }
    .imgandtextblock2 p {
      font-size: 1.3em;
    }
  }
  @media screen and (min-width: 500px) {
    .component6,
    .tekParam,
    .component6a,
    .component6b,
    .component6c {
      flex-direction: row;
      gap: 30px;
    }
    .column {
      flex-direction: row;
    }
    .column2 {
      flex-direction: row;
    }
    .column3 {
      flex-direction: row;
    }
    .column4 {
      flex-direction: row;
      flex-wrap: unset;
    }
    .column-reverse {
      flex-direction: row;
    }
    .column img {
      width: 50%;
    }
    .column-reverse img {
      width: 50%;
    }
    .wid50 {
      width: 50%;
    }
    .wid33 {
      width: 33.33%;
    }
    .wid25 {
      width: 25%;
    }
    .wid50 img {
      width: 100%;
    }
    .wid33 img {
      width: 100%;
    }
    .wid25 img {
      width: 100%;
    }
    
  }
  @media screen and (min-width: 768px) {
    .component1,
    .component15,
    .component16,
    .component17,
    .component18,
    .component19,
    .component20,
    .component21,
    .component22,
    .component23 {
      flex-direction: row;
    }
  
    .component1 h1,
    .component1 h2,
    .component1 h3,
    .component1 h4 {
      font-size: 2.5em;
    }
    .component1 p {
      font-size: 2em;
    }
    .component2 h1,
    .component2 h2,
    .component2 h3,
    .component2 h4 {
      font-size: 2.5em;
    }
    .component2 p {
      font-size: 2em;
    }
    .component6,
    .tekParam,
    .component6a,
    .component6b {
      flex-direction: row;
      gap: 30px;
    }
    .conponentStickyLeft {
      display: block;
      padding: 0px 10px;
    }
    .conponentStickyRight {
      display: block;
      padding: 0px 10px;
    }
    .conponentLeft {
      flex: 1;
      border-right: 1px solid transparent;
      padding: 0px 10px;
      margin-right: 10px;
    }
    .conponentCenter {
      max-width: var(--max-width-text);
      width: 100%;
      /* flex: 4; */
    }
    .conponentRight {
      flex: 1;
      border-left: 1px solid transparent;
      padding: 0px 10px;
      margin-left: 10px;
    }
    .column {
      flex-direction: row;
    }
    .column2 {
      flex-direction: row;
    }
    .column3 {
      flex-direction: row;
    }
    .column4 {
      flex-direction: row;
      flex-wrap: unset;
    }
    .column-reverse {
      flex-direction: row;
    }
    .column img {
      width: 50%;
    }
    .column-reverse img {
      width: 50%;
    }
    .wid50 {
      width: 50%;
    }
    .wid33 {
      width: 33.33%;
    }
    .wid25 {
      width: 25%;
    }
    .wid50 img {
      width: 100%;
    }
    .wid33 img {
      width: 100%;
    }
    .wid25 img {
      width: 100%;
    }
    .imgandtextblock1 h1,
    .imgandtextblock1 h2,
    .imgandtextblock1 h3 {
      font-size: 2.1em;
      margin-bottom: 10px;
    }
    .imgandtextblock1 p {
      font-size: 1.8em;
    }
    .imgandtextblock2 h1,
    .imgandtextblock2 h2,
    .imgandtextblock2 h3 {
      font-size: 2.1em;
      margin-bottom: 10px;
    }
    .imgandtextblock2 p {
      font-size: 1.8em;
    }
  }
  
  .gallery1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 5px;
  }
  
  .gallery1 img {
    width: 100%;
    height: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .gallery2 {
    column-count: 4;
    /* 4 sütun */
    column-gap: 5px;
    /* Sütunlar arası boşluk */
    max-width: 1400px;
    margin: 0 auto;
  }
  
  .gallery2 img {
    width: 100%;
    display: block;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    break-inside: avoid;
    /* Taşmaları engelle */
    object-fit: cover;
  }
  
  .gallery2 img:nth-child(3n) {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    /* Daha dikey */
    object-fit: cover;
  }
  
  .gallery2 img:nth-child(5n) {
    aspect-ratio: 16 / 9;
    /* Daha yatay */
    object-fit: cover;
  }
  
  .gallery3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
    grid-auto-rows: 35px;
    /* Kare temel boyut */
    gap: 5px;
    max-width: 1000px;
    margin: auto;
  }
  
  .gallery3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
  }
  
  /* Farklı boyutlarda mozaik efektleri */
  .gallery3 img.wide {
    grid-column: span 2;
    /* 2 kare genişliğinde */
  }
  
  .gallery3 img.tall {
    grid-row: span 2;
    /* 2 kare yüksekliğinde */
  }
  
  .gallery3 img.big {
    grid-column: span 2;
    grid-row: span 2;
    /* 2x2 kare */
  }
  
  .gallery4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
    grid-auto-rows: 35px;
    /* Kare birim */
    gap: 10px;
    max-width: 1000px;
    margin: auto;
  }
  
  .gallery4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    grid-column: span 1;
    grid-row: span 1;
  }
  
  .gallery4 img:nth-child(1) {
    grid-column: span 2;
  }
  
  /* 🔹 3. eleman → yatay geniş */
  .gallery4 img:nth-child(3n) {
    grid-column: span 2;
  }
  
  /* 🔹 5. eleman → dikey uzun */
  .gallery4 img:nth-child(5) {
    grid-row: span 3;
  }
  
  /* 🔹 7. eleman → 2x2 büyük kare */
  .gallery4 img:nth-child(7n) {
    grid-column: span 2;
    grid-row: span 2;
  }
  
  /* 🔹 10. eleman → dikey uzun */
  .gallery4 img:nth-child(10) {
    grid-row: span 2;
  }
  
  /* 🔹 12. eleman → dikey uzun */
  .gallery4 img:nth-child(12) {
    grid-column: span 3;
  }
  
  
  #toolbox .block {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px 0px;
    cursor: grab;
    background: #f9f9f9;
    font-size: 5px !important;
    width: calc(100% - 20px);
    height: fit-content;
    gap: 5px !important;
  
  }#toolbox .block *{
    gap: 5px !important;
    margin:0px 1px !important;
    padding:0px 1px !important;
    font-size: 5px !important;
    max-width: 170px !important;
    margin: 0px auto !important;
  }#toolbox .block h1,#toolbox .block h2,#toolbox .block h3{
    font-size: 1.2em !important;
  }#toolbox .block p{
    font-size: 1em !important;
  }#toolbox .block .conponentLeft {
    flex: 1;
  }
  #toolbox .block .conponentCenter {
    flex: 4;
  }
  #toolbox .block .conponentRight {
    flex: 1;
  }#toolbox .block .component1, #toolbox .block .component2 {
    max-width: 180px !important;
    margin: 0px auto !important;
  }#toolbox .block .imgandtextblock1 , #toolbox .block .imgandtextblock2 {
    max-width: 210px !important;
    margin: 0px auto !important;
  }#toolbox .block .imgandtextblock1 .column-reverse, #toolbox .block .imgandtextblock2 .column{
    max-width: 210px !important;
    margin: 0px auto !important;
  }