body {
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('/images/kanunc.webp');
      background-size: cover;
      background-repeat: no-repeat;
      min-height: 100vh;
      flex-direction: column;
      justify-content: space-between;
      color: #ececec;
    }
    .text {
      text-align: center;
      color: white;
      font-size: 24px;
    }
    .hak  {
      text-align: left;
      color: white;
      padding: 10px;
      margin: 20px;
      width: 85%;
      display:inline;
    }
    .hak-text {
      text-align: left;
      color: white;
      font-size: 20px;
      vertical-align: middle;
      min-height: 70vh;
      font-family: "Montagu Slab", serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      padding: 10px;
      margin: 20px;
      width: 85%;
      display:inline;

    }
    .hak img {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        width: 85%;
      }
      
      /* Picture styles */
      .picture {
        width: 90%;
        height: auto;
      }
      
      /* Responsive styles */


        /* Menu styles */
        header {
            color: #fff;
            height: 90px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            padding-top: 10;
          }
          
          nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          }
          
          .logo {
            font-size: 1.5em;
          }
          
          .menu {
            list-style: none;
            display: flex;
          }
          
          .menu li {
            margin: 0 10px;
          }
          
          .menu a {
            color: #fff;
            text-decoration: none;
          }
          
          .menu-toggle {
            display: none; /* Hide by default */
            font-size: 1.5em;
            cursor: pointer;
          }
    /* Row and Column styles */
    .row {
      width: 95%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 0 auto;
      padding: 0px;
      margin: 10px;
    }
    
    .column {
      flex-basis: calc(25% - 10px);
      margin-bottom: 20px;
      padding: 10px;
      margin-top: 20px;
      border: #aaaaaa 1px solid;
      color: #ececec;
      text-align: center;
      vertical-align: middle;
    }
    .column-qr {
      flex-basis: calc(10% - 10px);
      margin-bottom: 20px;
      padding: 10px;
      margin-top: 20px;
      color: #ececec;
      text-align: center;
      vertical-align: middle;
    }
    .column-hakimg {
      flex-basis: calc(30%);
      margin-bottom: 20px;
      margin-top: 20px;
      color: #ececec;
      text-align: right;
    }
    .column-hak {
      flex-basis: calc(70%);
      margin-bottom: 20px;
      margin-top: 20px;
      color: #ececec;
      text-align: left;
    }
    .column-hak p {
      text-align: left;
      color: #ececec;
      font-size: 20px;
      vertical-align: middle;
      font-family: "Montagu Slab", serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      margin: 20px;
      margin-top: 0px;
    }
    .baslik{
      text-align: center;
      color: white;
      font-size: 48px;
    }
    .montagu-slab-baslik {
      font-family: "Montagu Slab", serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
    }


    /* Responsive styles */
    @media (max-width: 768px) {
/*
        .menu {
            display: none; 
          }
        
          .menu-toggle {
            display: block; 
          }
        
          .menu.active {
            display: flex; 
          }
*/
      .menu {
        font-size: 0.8em;
      }
      .menu li {
        margin: 0 5px;
      }
      .logo img {
        width: 50px;
      }
      .column {
        flex-basis: 100%;
      }
      .grid-container {
        grid-template-columns: 1fr;
      }
      .column-hakimg {
        flex-basis: 100%;
        text-align: center;
      }
      .column-hak {
        flex-basis: 100%;
        text-align: justify;
      }
      .column-qr {
        flex-basis: 100%;
        text-align: center;
      }
    }