#menu-toggle, #submenu1, #submenu2 {
      display: none;
    }

    /* Menü İkonu (Hamburger) */
    .menu-icon {
      display: block;
      width: 30px;
      margin: 20px;
      cursor: pointer;
      position: relative;
      z-index: 999;
    }

    /* Çizgiler – Başta siyah */
    .menu-icon span {
      display: block;
      height: 4px;
      background: #000;
      margin: 6px 0;
      border-radius: 2px;
      transition: background 0.3s;
    }

    /* Menü açıldığında çizgiler beyaz olur */
    #menu-toggle:checked + .menu-icon span {
      background: #fff;
    }

    .menu-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
      transform: translateX(-100%);
      transition: transform 0.4s ease;
      z-index: 998;
    }

    #menu-toggle:checked ~ .menu-container {
      transform: translateX(0);
    }

    .panel {
      position: absolute;
      top: 0;
      left: 100%;
      width: 100%;
      height: 100%;
      background: #000;
      transition: left 0.4s ease;
      padding-top: 60px;
    }

    .panel a,
    .panel label.menu-item,
    .panel .close-button,
    .panel .back-button {
      display: block;
      padding: 15px 20px;
      border-bottom: 1px solid #333;
      text-decoration: none;
      color: #fff;
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }

    .panel .close-button,
    .panel .back-button {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 22px;
      font-weight: bold;
      
    }

    #menu-toggle:checked ~ .menu-container .main { left: 0; }
    #submenu1:checked ~ .menu-container .submenu1 { left: 0; }
    #submenu2:checked ~ .menu-container .submenu2 { left: 0; }